部落格彩蛋:旋轉、跳躍,我閉著眼

如果大家最近有瀏覽我的部落格,應該會發現部落格有一些高調的小變化,雖然彩蛋比較偏向是隱藏、驚喜的呈現,但是部落格的這些變化是朋友送我的禮物,而且我完全不知道他會怎麼改造我的部落格,所以就方面而言,也算是部落格的彩蛋吧 XD

會想特別紀錄這篇,是因為昨天在 ask.fm 看到了這個問題:

耶乎,終於有人發現了!超、感、動 (雖然他把我的名字打錯了,但是他是第一個主動發現的,所以我原諒他 XDDD

既然有人發現了,那我就來寫一篇文章紀念我的第一個部落格彩蛋吧。

彩蛋緣起

因為跟朋友的對話紀錄都砍掉了,所以只好憑印象記一下 XDD。
之前有幫朋友看一些網頁的 css,為了方便我修改,請朋友在他的網站加嵌入我測試的 css 連結;然後聊著聊著,他就說我的網站也可以放他連結之類的,我就說好。
放完之後他說這樣我就可以改造你的部落格了唷,我聽了覺得很有趣,所以興致勃勃的歡迎他隨便亂改 (大概兩個人都是屬於 For Fun 的幼稚咖)
因為不知道朋友會把部落格改成怎樣,所以每次看到都是一種小驚喜 =)

另外有人以為是我朋友駭進我的 blog,但其實不是,我只是嵌入了他給我的 css 連結而已。不過朋友很厲害,所以即使要他駭進我的部落格,對他也不是什麼難事 (笑)

彩蛋有哪些

高調的彩蛋跟需要拖裙子的低調彩蛋都有,一開始進入部落格之後,會看到 (1)我的 MUKI space* 被改名跟反轉了~ (2)標題下面的敘述會左右晃動

接著視線轉到側邊欄,(3)頭像跟一些 social media 圖像會瘋狂旋轉。
而這個應該就是 ask.fm 板友想問的問題囉

最後一個彩蛋呢,需要脫裙子(掀衣服)看,這意思就是要看網站的原始碼,出自 Pual 大大的名言之一 =)
所以大家可以看看我部落格的原始碼,找一下這些 code 揪竟出自哪個 css =),該彩蛋的重點在於 CSS 檔名,以下就 BJ4 了 (((大笑

原始碼解析

很感謝朋友幫我做了這些有趣的彩蛋,有興趣想知道怎麼做的話,可以直接拆解原始碼來看。
主要是用到 css3 的 animation transform 以及利用 keyframe 做出不間斷的動畫。
有興趣的朋友可以直接參考原始碼唷。

.header h1 a {
  display: none
}

.header h1:before {
  content: "MIKU space*"
}

.header h1 {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.description{
  -webkit-animation-fill-mode:both;
  -moz-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  -o-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  -ms-animation-duration:1s;
  -o-animation-duration:1s;
  animation-duration:1s;
}

.description{
  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  -ms-animation-duration:2s;
  -o-animation-duration:2s;
  animation-duration:2s;
}

@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-10%) rotate(-5deg); }
  30% { -webkit-transform: translateX(10%) rotate(3deg); }
  45% { -webkit-transform: translateX(-5%) rotate(-3deg); }
  60% { -webkit-transform: translateX(0%) rotate(2deg); }
  75% { -webkit-transform: translateX(-0%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}

@-moz-keyframes wobble {
  0% { -moz-transform: translateX(0%); }
  15% { -moz-transform: translateX(-10%) rotate(-5deg); }
  30% { -moz-transform: translateX(10%) rotate(3deg); }
  45% { -moz-transform: translateX(-5%) rotate(-3deg); }
  60% { -moz-transform: translateX(0%) rotate(2deg); }
  75% { -moz-transform: translateX(-0%) rotate(-1deg); }
  100% { -moz-transform: translateX(0%); }
}

@-o-keyframes wobble {
  0% { -o-transform: translateX(0%); }
  15% { -o-transform: translateX(-10%) rotate(-5deg); }
  30% { -o-transform: translateX(10%) rotate(3deg); }
  45% { -o-transform: translateX(-5%) rotate(-3deg); }
  60% { -o-transform: translateX(0%) rotate(2deg); }
  75% { -o-transform: translateX(-0%) rotate(-1deg); }
  100% { -o-transform: translateX(0%); }
}

@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-10%) rotate(-5deg); }
  30% { transform: translateX(10%) rotate(3deg); }
  45% { transform: translateX(-5%) rotate(-3deg); }
  60% { transform: translateX(0%) rotate(2deg); }
  75% { transform: translateX(-0%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.description{
  -webkit-animation-name: wobble;
  -moz-animation-name: wobble;
  -o-animation-name: wobble;
  animation-name: wobble;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  -o-animation-iteration-count:infinite;
  animation-iteration-count:infinite
}

.sidebar-entry img{
  -webkit-animation-fill-mode:both;
  -moz-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  -o-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  -ms-animation-duration:2s;
  -o-animation-duration:2s;
  animation-duration:2s;
}

.sidebar-entry img {
  -webkit-animation-duration:5s;
  -moz-animation-duration:5s;
  -ms-animation-duration:5s;
  -o-animation-duration:5s;
  animation-duration:5s;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}

@-moz-keyframes rotateIn {
  0% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(-200deg);
    opacity: 0;
  }
    
  100% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(0);
    opacity: 1;
  }
}

@-o-keyframes rotateIn {
  0% {
    -o-transform-origin: center center;
    -o-transform: rotate(-200deg);
    opacity: 0;
  }
    
  100% {
    -o-transform-origin: center center;
    -o-transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0;
  }
    
  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
}

.sidebar-entry img {
  -webkit-animation-name: rotateIn;
  -moz-animation-name: rotateIn;
  -o-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  -o-animation-iteration-count:infinite;
  animation-iteration-count:infinite
}

You may also like...

11 Responses

  1. jerryjen 說道:

    muki美女您好…看到這篇文章真是感動…謝謝您哦…第一次請教您問題還承蒙您寫這篇文章回應
    真是太感謝了。還有就是美女人美而心也美…加起來就更美囉…哈哈…謝謝希望有機會再向您請益
    還望您不吝指教哦,,,對了還要跟您說對不起上一次字打太快哈哈…錯字連篇感謝您不跟我計較…
    再一次謝謝囉…

  2. AZZURRO Domoto 說道:

    那請問現在標題顯示的MIKU space*也是彩蛋嗎?(認真)

    • muki 說道:

      沒錯~~ 那塊也是朋友幫我用的 XD,本來像圖片一樣有反轉,後來他把反轉拿掉了 XD

  3. hepha 說道:

    請問你放原始碼的CSS是如何做的呢?他語法會自動偵測上色嗎?
    謝謝

  4. Kaden 說道:

    a/alaikum g sir nic or name mentioned kia tha tb bhi malum nhi ho saka wahan form no bhi required he,jo k mere pass nhi he,ye kaha sir mene kl?okay thanks sir i;ll check mustly,but sir i m very anxious abuea,botcause i want to do teaching.

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>