RoboInfo- 科幻風格旋轉圈圈

好久沒更新的 RoboInfo 又來更新功能啦，這次是之前一直想做的科幻風格會一直旋轉的圈圈，在很多科幻電影都會看到，像鋼鐵人裡面的就很經典:



技術就有興趣就可以去研究一下 css3 的 Animation ，簡單的說就是寫一個類似一般程式 function 的東西。

view plaincopy to clipboardprint

1. @keyframes rotate1 {   
2.   0%   { transform: rotate(0deg);   
3.         transition-timing-function: ease-in-out;     }   
4.   50%   { transform: rotate(30deg);    
5.         transition-timing-function: ease-in-out; }   
6.   100% { transform: rotate(0deg);    
7.         transition-timing-function: ease-in-out;   
8.     }   
9. }  

之後再加到要放動畫的元素上就好了。

view plaincopy to clipboardprint

1. animation:  rotate1 2s infinite;