[RPG] 有飄的煙 css3 animate

話說為了做網站，忙了好一陣子Q_Q...底層和走向現在是稍微好用了一點，總算可以來做點筆記了Orz...

一開始把首頁分享給朋友看，就有人說，那個煙怎麼不會動，轉盤不能轉...
然後為了阿宅的名譽，也要給他搞出來XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour1.html

煙的作法，簡單的說就是有底圖，上面再貼一張會飄的圖
切圖的時後，就是底圖：

再切純煙的圖：（底是透明色）

再幫純煙的圖 上透明(opacity) 並加上  css 動畫(smoke)
<img src="/imgs/egg/egg_s0.png" id="img_s" class="timg smoke" style="left: 3%; top: -8%; margin-top: 36px;" style="opacity: 0.2;">

.smoke {
  -webkit-animation-name: smoke;
  animation-name: smoke;
  -webkit-animation-duration: 5s ;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
  animation-iteration-count: infinite; /*infinite*/
}

@-webkit-keyframes smoke {
  from {
   
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.3;
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale3d(.99, .99, .99);
    transform: scale3d(.99, .99, .99);
  }
}

@keyframes smoke {
  from {
   
  }
 
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.3;
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale3d(.99, .99, .99);
    transform: scale3d(.99, .99, .99);
  }
}

其原型是根據
http://daneden.github.io/animate.css/
一個搖的很慢的，形變有在調整一下的 shake...

但其實這裡面最難的是，怎麼把圖片對準Orz...
還有解決在不同尺寸的 browser，手機還轉來轉去的鬼問題～
這部份以後有空再來吐口水好了XD...