社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 基於HTML5的齒輪動畫特效_html5教學技巧

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

WBOY
發布： 2016-05-16 15:45:54
原創
1641 人瀏覽過

這是一個基於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；   
    相關標籤：
    html5
    來源：php.cn
    上一篇：淺析HTML5的WebSocket與伺服器推送事件_html5教學技巧 下一篇：詳解HTML5中的Communication API基本使用方法_html5教學技巧
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章
    最新問題
    如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
    來自於 2024-04-06 15:33:12
    0
    1
    433
    PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
    來自於 2024-04-05 12:57:00
    0
    1
    456
    HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
    來自於 2024-04-02 11:47:56
    0
    1
    275
    使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
    來自於 2024-04-01 20:42:38
    0
    1
    259
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板