搜尋

首頁 >web前端 >H5教程 >基於HTML5的齒輪動畫特效_html5教學技巧

基於HTML5的齒輪動畫特效_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:45:541600瀏覽

這是一個基於HTML5的齒輪動畫特效，我們將齒輪轉動的物理原理，轉換為HTML5程式碼，在網頁上實現了模擬齒輪轉動的動畫效果。這個齒輪動畫的最大特點是它由好多個齒輪組成，這對齒輪傳動的演算法要求就大大提高了，而且我們並沒有用JavaScript，而是純CSS3實現的。

HTML程式碼

XML/HTML Code複製內容到剪貼簿
  1. div id=id=id" 🎜>>  
  2.  div id=id=id
    3. =
  3. * 🎜>>     div id>
  4.       div id id >
  5. div>      div id
    6.  
  6. id id idpmmp> -1">       div class="影子"  
  7. id="shadow15">>
    >       div
  8.  id id id id id id id id 
  9. id“ >div>       div class
    10. =
  10. "影子"  id="shadow14">>
>       div  id
  • ="gear14" >div>       div 
    • class
  • ="影子"  id=
    • "shadow13"
  • >>
    • >       div id="gear13" >div>      div>      div id id id idpmmp> -2">  
  •     div class="影子"  id="shadow10">>
    >  
  •     div id id id id
    •  
  • id id id id id“ >div>       
  • div class="影子"  id="shadow3">>
    • >        div id id id id 
  • id id id id id“ >div>      
  • div>      
    • div id id 
  • id idpmmp> -3">       div class="影子"  id=
    • "shadow9"
  • >>
    • >       div id
  • ="gear9" >div>
  •        div class="影子"  
    • id="shadow7">>>       div id="gear7" >div>      div>      div id id id idpmmp> -4">  
  •     div class="影子"  id="shadow6">>>
  •        div id id id“ >
  • div>       div id id 
    • id
  •  id id 
    • id
  •  id id id“ >div
  • >      div>      div id id 
  • id idpmmp> -5">       div class=
    • "影子"
  •  id="shadow12">div >       div id 
    • id
  •  id id id id id id
    •  
  • id“ >div>       div class="影子"  id
  • ="shadow11">>
    >       div 
  • id="gear11" >div
    • >       div class="影子"  id="shadow8">>
    >       div id="gear8" >div>      div>  
  •    div class 類  🎜> id="shadow1">>
  • >      div id id 
  • >div>      
    • div 
  • id id id idpmmp> -6">       div class=
    • "影子"
  •  id="shadow5">>>       
  • div id id id id id 
  • id id id 
  • id“ >div>       div id id id
    •  
  • id id id id id id“ >
  • div>      div>      
  • div class 類  🎜> id="shadowweight">
    >
  •       div
    •  
  • id id id
  • >div>  
    •    
    div id="鏈" >div>      div id id >      🎜>>div>     div>    div>   div>  

    CSS代碼

    CSS Code複製內容到剪貼簿
    1. #level{   
    2.  寬度：100%；   
    3.  高度:1px;   
    4.  位置：絕對；   
    5.  上方：50%；   
    6. }   
    7. #content{   
    8.  文字對齊:居中;   
    9.  頁邊距:-327px;   
    10. }   
    11. #gears{   
    12.  寬度:478px;   
    13. ;  高度:655px
      14. ;   
    14.  職位：親子
    15. ；     顯示:內嵌-塊
    16. -塊-  垂直對齊
      17. :
    17. 中間
      18. ;   
    18. }    #gears
      19. -
    19. 靜態{     背景:url(FgFnjks.png) (FgFnjks.png) 無重複 🎜> -363px -
    20. 903px；    ；     
    21. 寬度:329px;    ;   
    22.  高度:602px;   
    23.  位置：絕對；   
    24.  底部底部:5px;  
      25.  
    25. 右
      26. 右
    26. :
      27. 0px
    27. ;    不透明度：0.4；   
      28. }   
    28. #title{   
      29.  
    29. 垂直對齊:中間;   
      30.  
    30. 顏色:#9EB7B5
      31. ;   
    31. ;     寬度：43%；   
      32.  
    32. 顯示:內嵌-塊-塊- }  
    33. #title h1{   
    34.  字體系列: 'PTSansNarrowBold'  🎜>；     
      35. 字體大小
    35. ：3.6em；     
      36. 文字陰影
    36. :rgba(0, 0, 0, 0.36) 7px 10 像素;    }   
    37. #title p{   
    38.  字體系列：
    39. 無襯線；     字體大小
      40. ：1.2em；   
    40.  行高
      41. ：148%；   
    41.  文字陰影
      42. :rgba(0, 0, 0, 0.36) 
    42. 1px🎜> 1 像素 0 像素;    }      
    43. .shadow{   
    44.  -webkit-box-shadow: 4px
    45.  7px
    46. 🎜> 10px rgba(43, 36, 0, 0.36);     -moz-box-shadow: 4px 7px 🎜> 10px
    47.  rgba(43, 36, 0, 0.36);     方框陰影： 4px 7px 

      10px rgba(43, 36, 0, 0.36);   

      48. }   
    48.    /*齒輪系統-1*/   #gear15
      49. {   
      50.  
    50. 背景
      51. : 
    51. url(FgFnjks.png) 🎜> 0 -993px
    52. ；     寬度
    53. : 321px;    ;     高度: 321px
      54. ;   
    54. ;     位置：
    55. 絕對；     左:
    56. 45px;     上方
      57. :
    57. 179px;      
    58. -webkit-animation：向後旋轉 24000ms 線性無限；    -moz-animation：向後旋轉 24000ms 線性無限；     -ms-animation：向後旋轉 24000ms 線性無限；   
    59.  動畫：向後旋轉 24000 毫秒線性無限；   
    60. }  
    61. #shadow15{   
    62.  寬度:306px;   
    63.  高度:306px;   
    64.  -webkit-邊框-半徑：153px
      65. ;   
    65.  -moz-邊框-半徑：153px
      66. ；   
    66.  邊框-半徑：153px
      67. ；   
    67.  位置：絕對
    68. ；     左:52px
    69. ;     上方:
      70. 186px
    70. ;   
    71. }   
    72. #gear14{     背景: url(FgFnjks.png) 🎜> 0 -856px
      73. ;   
    73.  寬度: 87px
      74. ;   
    74. ;     高度
      75. : 
    75. 87px;    ;   
      76.  
    76. 位置：絕對；   
      77.  
    77. 左:162px;   
    78.  上方
    79. :296px;   
      80. ;   
    80. }    #shadow
    81. 14{     寬度:70px
    82. ;     高度:
      83. 70px
    83. ;     -webkit-邊框-半徑：
    84. 35px；    -moz-邊框-半徑：
      85. 35px
    85. ；    邊框-半徑：35px
    86. ；    ；     位置
    87. ：絕對；     左
    88. :171px;     上方:304px;    }  
    89. #gear13{   
    90.  背景: url(FgFnjks.png) 🎜> 0 -744px；     
    91. 寬度: 62px;    ;   
    92.  高度: 62px;   
    93. ;     位置：
    94. 絕對；     左:
    95. 174px;     上方
      96. :
    96. 309px
      97. ;   
    98.   
    99. -webkit-animation：旋轉 8000ms 線性無限；   
    100. -moz-animation：旋轉 8000ms 線性無限；   
    101. -ms-animation：旋轉 8000ms 線性無限；   
    102.  動畫：旋轉8000ms線性無限；    }   
    103. #shadow13{     寬度
    104. :36px;     
      105. 高度
    105. :36px;     -webkit-
    106. 邊框-半徑：18px； 🎠  -moz-
      107. 邊框
    107. -半徑：18px；    邊框
    108. -半徑：18px；    ；   
    109.  位置：絕對；   
    110.  左:187px;   
    111.  
      112. 上方
    112. :
      113. 322px
    113. ;    ;   
    114. }      
    115. /*齒輪系統-2*/   #gear10{     
      116. 背景
    116. : url(FgFnjks.png) 🎜> 0 -184px；   
    117.  寬度: 122px;   
    118. ;     高度: 
      119. 122px
    119. ;    ;     位置
    120. ：絕對；   
    121.  左
    122. :175px
    123. ;   
    124.  
      125. 上
    125. :0;   
    126.    -webkit-animation：向後旋轉 8000 毫秒線性無限；    -moz-animation：向後旋轉 8000ms 線性無限；    -ms-animation：向後旋轉 8000ms 線性無限；     動畫：向後旋轉 8000 毫秒線性無限；    }  
    127. #shadow10{   
    128.  寬度:86px;   
    129.  高度:86px;   
    130.  -webkit-邊框-半徑：43px
      131. ；  
    131.  -moz-邊框-半徑：43px；  
      132.  邊框-半徑：43px；   
    132. ；     位置：
      133. 絕對
    133. ；     左:
      134. 193px
    134. ;     上:
    135. 18px;   
    136. }   
    137. #gear3{     背景: url(FgFnjks.png) 🎜> 0 -1493px
    138. ;     寬度：85px
    139. ；     高度: 
      140. 84px
    140. ;    ;     
      141. 位置
    141. ：絕對；     
      142. 左
    142. :194px;     
    143. 上方:
    144. 19px;   
      146.   
      147. -webkit-animation：旋轉 10000ms 線性無限；   
      148. -moz-animation：旋轉 10000ms 線性無限；   
      149.  -ms-animation：旋轉 10000ms 線性無限；   
    149. 動畫：旋轉10000ms線性無限；   
      150. }   
    150. #shadow3{   
      151.  
    151. 寬度:60px;   
    152.  高度:60px;   
    153.  -webkit-邊框-半徑：30px；  
    154.  -moz-邊框-半徑：30px；  
      155.  
    155. 邊框-半徑：30px；   
    156.  位置：絕對；   
    157.  左:206px;   
    158.  上方:31px;    }  
    159.   
    160. /*齒輪系統-3*/  
    161. #gear9{   
    162.  背景: url(FgFnjks.png) 🎜> -371 像素 -280 像素；    ；   
    163.  寬度: 234px;   
    164. ;     高度：
      165. 234px
    165. ；     位置：
    166. 絕對；     左:
    167. 197px;     上方
      168. :
    168. 96px
      169. ;   
    170.   
    171. -webkit-animation：旋轉 12000ms 線性無限；   
    172. -moz-animation：旋轉 12000ms 線性無限；   
    173.  -ms-animation：旋轉 12000ms 線性無限；   
    174.  動畫：旋轉12000ms線性無限；    }   
    175. #shadow9{     寬度
    176. :200px;    ;  
      177. 高度
    177. :200px;     -webkit-
    178. 邊框-半徑：100px；     -moz-
    179. 邊框-半徑：100px；     
    180. 邊框-半徑：100px；   
      181.  
    181. 位置：絕對；   
      182.  
    182. 左:214px;   
    183.  上方
    184. :113px;   
    185. }    #gear7{     背景: 
      186. url
    186. (FgFnjks.png) 🎜> -371px 0；     
    187. 寬度: 108px;    ;   
    188.  高度: 108px;   
    189. ;     位置：
    190. 絕對；     左:
    191. 260px;   
      193.  
    193. 上方
      194. :
    194. 159px
      195. ;   
    196.    -webkit-animation：向後旋轉 10000ms 線性無限；    -moz-animation：向後旋轉 10000ms 線性無限；     -ms-animation：向後旋轉 10000ms 線性無限；     動畫：向後旋轉 10000ms 線性無限；    }  
    197. #shadow7{   
    198.  寬度:76px;   
    199.  高度:76px;   
    200.  -webkit-邊框-半徑：38px
      201. ； 🎠
    201.  -moz-邊框-半徑：38px；  
      202.  邊框-半徑：38px；   
    202. ；     位置：
      203. 絕對
    203. ；     左:
      204. 276px
    204. ;    ;     
      205. 上方
    205. :
      206. 175px
    206. ;   
    207. }      
    208. /*齒輪系統-4*/  
    209. #gear6{     背景: url(FgFnjks.png)
      210. 🎜> 0 -
    210. 1931px；     寬度
      211. : 
    211. 134px;    ;     
    212. 高度: 134px;    ;   
    213.  位置：絕對；   
    214.  左:305px;   
    215.  底部
    216. 底部:
    217. 212px;
    218.   
    219. -webkit-animation：向後旋轉 10000ms 線性無限；   
    220. -moz-animation：向後旋轉 10000ms 線性無限；   
    221.  -ms-animation：向後旋轉 10000ms 線性無限；     動畫：向後旋轉 10000ms 線性無限；   
    222. }    #shadow6{   
    223.  寬度:98px;   
    224.  高度:98px;   
    225.  -webkit-邊框-半徑：49px； 🎠
      226.  -moz-邊框-半徑：49px；  
    226.  邊框-半徑：49px；   
      227. ；   
    227.  位置：絕對
    228. ；     左:323px;   
    229.  底部底部:230px;   }  
    230. #gear4{   
    231.  背景: url(FgFnjks.png) 🎜> 0 -1627px;     
    232. 寬度: 69px;    ;   
    233.  高度: 69px
      234. ;   
    234. ;     位置
      235. ：
    235. 絕對；     左
      236. :
    236. 337px;     底部底部
    237. :245px
    238. ;   
    239. -webkit-animation：向後旋轉 10000ms 線性無限；   
    240. -moz-animation：向後旋轉 10000ms 線性無限；   
    241.  -ms-animation：向後旋轉 10000ms 線性無限；   
    242.  動畫：向後旋轉 10000ms 線性無限；   
    243. }   
    244.   
    245. /*齒輪系統-5*/  
    246. #gear12{     背景: url(FgFnjks.png) 🎜> 0 -530px
      247. ；   
    247.  寬度: 164px
      248. ;   
    248. ;     高度
      249. : 
    249. 164px;    ;   
      250.  
    250. 位置：絕對；   
      251.  
    251. 左:208px;    ;  
    252. 底部底部
    253. :85px
    254. ;     
    255. -webkit-animation：旋轉 8000ms 線性無限；   
    256. -moz-animation：旋轉 8000ms 線性無限；   
    257. -ms-animation：旋轉 8000ms 線性無限；     動畫：旋轉8000ms線性無限；    }  
    258. #shadow12{   
    259.  寬度:124px;   
    260. ;     高度:
      261. 124px
    261. ;     -webkit-邊框-半徑：
    262. 62px；    -moz-邊框-半徑：
      263. 62px
    263. ；    邊框-半徑：62px
    264. ；    ；     位置
    265. ：絕對；     左
    266. :225px;    ;     
    267. 底部底部
    268. :107px;   }   
    269. #gear11{     背景: url(FgFnjks.png)
      270. 🎜> 0 -
    270. 356px；     寬度
      271. : 
    271. 125px;    ;     
    272. 高度: 124px;    ;   
    273.  位置：絕對；   
    274.  左:228px;    ;   
    275.  
    276. 底部底部
    277. :105px
    278. ;     
    279. -webkit-animation：向後旋轉 10000ms 線性無限；   
    280. -moz-animation：向後旋轉 10000ms 線性無限；   
    281.  -ms-animation：向後旋轉 10000ms 線性無限；     動畫：向後旋轉 10000ms 線性無限；   
    282. }    #shadow11{   
    283.  寬度:88px;   
    284.  高度:88px
      285. ;   
    285.  -webkit-邊框-半徑：44px
    286. ；    -moz-邊框-半徑：44px
      287. ;  
    287.  邊框-半徑：44px；   
    288.  位置：絕對
      289. ；   
    289.  左:247px;   
    290. ;     底部底部:123px;   }  
    291. #gear8{   
    292.  背景: url(FgFnjks.png) 🎜> -371 像素 -158 像素；    ；   
    293.  寬度: 72px;   
    294. ;     高度: 
    295. 72px;    ;     
    296. 位置：絕對；     
    297. 左:254px;    ;   
      298.  
    298. 底部
      299. 底部
    299. :
      300. 131px
    300. ;  
      301.   
      302. -webkit-animation：旋轉 6000ms 線性無限；   
      303. -moz-animation：旋轉 6000ms 線性無限；   
      304. -ms-animation：旋轉 6000ms 線性無限；   
    304.  動畫：轉 6000ms 線性無限；   
      305. }   
    305. #shadow8{   
      306.  
    306. 寬度:42px;   
    307.  高度:42px;   
    308.  -webkit-邊框-半徑：21px；  
    309.  -moz-邊框-半徑：21px；  
      310.  
    310. 邊框-半徑：21px；    ；   
    311.  位置：絕對
      312. ；   
    312.  左:269px;   
    313. ;     底部底部:146px;   }  
    314.   
    315. /*齒輪1*/  
    316. #gear1{   
    317.  背景: url(FgFnjks.png) 🎜> 0 0;     
    318. 寬度: 135px;    ;   
    319.  高度: 134px;   
    320. ;     位置：絕對
    321. ；     左:83px
    322. ;     底部底部:
      323. 111px
    323. ;  
      324.   
      325. -webkit-animation：向後旋轉 10000ms 線性無限；   
      326. -moz-animation：向後旋轉 10000ms 線性無限；   
      327.  -ms-animation：向後旋轉 10000ms 線性無限；   
      328.  動畫：向後旋轉 10000ms 線性無限；   
      329. }   
    329. #shadow
      330. 1{   
    330.  寬度:96px
      331. ;   
    331.  高度:96px
    332. ;     -webkit-邊框-半徑：
      333. 48px
    333. ； 🎜  -moz-邊框-半徑：48px
      334. ；  
    334.  邊框-半徑：48px；   
    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：淺析HTML5的WebSocket與伺服器推送事件_html5教學技巧下一篇：淺析HTML5的WebSocket與伺服器推送事件_html5教學技巧

    相關文章

    看更多