コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5_html5 チュートリアル スキルに基づいたギア アニメーションの特殊効果

HTML5_html5 チュートリアル スキルに基づいたギア アニメーションの特殊効果

WBOY
リリース： 2016-05-16 15:45:54
オリジナル
1620 人が閲覧しました

これは、HTML5 に基づいた歯車アニメーションの特殊効果です。歯車の回転の物理原理を HTML5 コードに変換し、Web ページ上に擬似的な歯車の回転のアニメーション効果を実装します。この歯車アニメーションの最大の特徴は、複数の歯車で構成されているため、歯車の送信に必要なアルゴリズムが大幅に増加していることです。また、実装には JavaScript を使用せず、純粋な CSS3 を使用しました。

HTML コード

XML/HTML コードコンテンツをクリップボードにコピー
  1. <div id="レベル" >
  2. <div id="コンテンツ" >
  3. <div id="歯車" >
  4. <div id="歯車- static">div>
  5. <div id="ギア- system-1">
  6. <div class="シャドウ" id="shadow15">div>
  7. <div id="gear15" >div>
  8. <div class="シャドウ" id="shadow14">div>
  9. <div id="gear14" >div>
  10. <div class="シャドウ" id="shadow13">div>
  11. <div id="gear13" >div>
  12. div>
  13. <div id="ギア-システム-2">
  14. <div class="シャドウ" id="shadow10">div>
  15. <div id="gear10" >div>
  16. <div class="シャドウ" id="shadow3">div>
  17. <div id="gear3" >div>
  18. div>
  19. <div id="ギア- system-3">
  20. <div class="シャドウ" id="shadow9">div>
  21. <div id="gear9" >div>
  22. <div class="シャドウ" id="shadow7">div>
  23. <div id="gear7" >div>
  24. div>
  25. <div id="ギア- system-4">
  26. <div class="シャドウ" id="shadow6">div>
  27. <div id="gear6" >div>
  28. <div id="gear4" >div>
  29. div>
  30. <div id="ギア- system-5">
  31. <div class="シャドウ" id="shadow12">div>
  32. <div id="gear12" >div>
  33. <div class="シャドウ" id="shadow11">div>
  34. <div id="gear11" >div>
  35. <div class="シャドウ" id="shadow8">div>
  36. <div id="gear8" >div>
  37. div>
  38. <div class="shadow" id="shadow1">div>
  39. <div id="gear1" >div>
  40. <div id="ギア- system-6">
  41. <div class="シャドウ" id="shadow5">div>
  42. <div id="gear5" >div>
  43. <div id="gear2" >div>
  44. div>
  45. <div class="shadow" id="shadowweight">div>
  46. <div id="chain-サークル">div>
  47. <div id="チェーン" >div>
  48. <div id="weight" >div>
  49. div>
  50. div>
  51. div>

CSS コード

CSS コードコンテンツをクリップボードにコピーします
  1. #レベル{
  2. 幅:100%;   
  3. 高さ:1px;   
  4. 位置:絶対;   
  5. トップ:50%;   
  6. }
  7. #content{
  8. text-align:center;   
  9. マージントップ:-327px;   
  10. }
  11. #歯車{
  12. 幅:478px;   
  13. 高さ:655px;   
  14. 位置:相対;   
  15. 表示:インライン-ブロック;   
  16. vertical-align:middle;   
  17. }
  18. #gears-静的{
  19. 背景:url(FgFnjks.png) 繰り返しなし -363px -903px;   
  20. 幅:329px;   
  21. 高さ:602px;   
  22. 位置:絶対;   
  23. 下下:5px;   
  24. 右右:0px;   
  25. 不透明度:0.4;   
  26. }
  27. #title{
  28. vertical-align:middle;   
  29. 色:#9EB7B5;   
  30. 幅:43%;   
  31. 表示:インライン-ブロック;   
  32. }  
  33. #title h1{
  34. フォントファミリー: 'PTSansNarrowBold',サンセリフ ;   
  35. フォントサイズ:3.6em;   
  36. text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;   
  37. }
  38. #title p{
  39. フォントファミリー: サンセリフ;   
  40. フォントサイズ:1.2em;   
  41. 行の高さ:148%;   
  42. text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;   
  43. }
  45. .shadow{
  46. -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  47. -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  48. box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  49. }
  51. /*ギアシステム-1*/
  52. #gear15{
  53. 背景: url(FgFnjks.png) 繰り返しなし 0 -993px;   
  54. 幅: 321px;   
  55. 高さ: 321px;   
  56. 位置:絶対;   
  57. 左:45px;   
  58. トップ:179px;   
  60. -webkit-animation: 回転バック 24000ms リニア無限;   
  61. -moz-animation: 回転バック 24000ms リニア無限;   
  62. -ms-animation: 回転バック 24000ms リニア無限;   
  63. アニメーション: 回転バック 24000 ミリ秒 リニア無限。   
  64. }  
  65. #shadow15{
  66. 幅:306px;   
  67. 高さ:306px;   
  68. -webkit-border-radius:153px;   
  69. -moz-border-radius:153px;   
  70. ボーダー-半径:153px;   
  71. 位置:絶対;   
  72. 左:52px;   
  73. トップ:186px;   
  74. }
  75. #gear14{
  76. 背景: url(FgFnjks.png) 繰り返しなし 0 -856px;   
  77. 幅: 87px;   
  78. 高さ: 87px;   
  79. 位置:絶対;   
  80. 左:162px;   
  81. トップ:296px;   
  82. }
  83. #shadow14{
  84. 幅:70px;   
  85. 高さ:70px;   
  86. -webkit-border-radius:35px;   
  87. -moz-border-radius:35px;   
  88. ボーダー-半径:35px;   
  89. 位置:絶対;   
  90. 左:171px;   
  91. トップ:304px;   
  92. }  
  93. #gear13{
  94. 背景: url(FgFnjks.png) 繰り返しなし 0 -744px;   
  95. 幅: 62px;   
  96. 高さ: 62px;   
  97. 位置:絶対;   
  98. 左:174px;   
  99. トップ:309px;   
  101. -webkit-animation: 8000 ミリ秒のリニア無限回転。   
  102. -moz-animation: 8000 ミリ秒のリニア無限回転。   
  103. -ms-animation: 8000 ミリ秒、リニア、無限に回転します。   
  104. アニメーション: 8000 ミリ秒のリニア無限回転。   
  105. }
  106. #shadow13{
  107. 幅:36px;   
  108. 高さ:36px;   
  109. -webkit-border-radius:18px;   
  110. -moz-border-radius:18px;   
  111. ボーダー-半径:18px;   
  112. 位置:絶対;   
  113. 左:187px;   
  114. トップ:322px;   
  115. }
  117. /*gear-system-2*/
  118. #gear10{
  119. 背景: url(FgFnjks.png) 繰り返しなし 0 -184px;   
  120. 幅: 122px;   
  121. 高さ: 122px;   
  122. 位置:絶対;   
  123. 左:175px;   
  124. トップ:0;   
  126. -webkit-animation: 回転バック 8000 ミリ秒線形無限。   
  127. -moz-animation: 回転バック 8000ms リニア無限;   
  128. -ms-animation: 回転バック 8000ms リニア無限。   
  129. アニメーション: 回転バック 8000 ミリ秒 リニア無限。   
  130. }  
  131. #shadow10{
  132. 幅:86px;   
  133. 高さ:86px;   
  134. -webkit-border-radius:43px;   
  135. -moz-border-radius:43px;   
  136. ボーダー-半径:43px;   
  137. 位置:絶対;   
  138. 左:193px;   
  139. トップ:18px;   
  140. }
  141. #gear3{
  142. 背景: url(FgFnjks.png) 繰り返しなし 0 -1493px;   
  143. 幅: 85px;   
  144. 高さ: 84px;   
  145. 位置:絶対;   
  146. 左:194px;   
  147. トップ:19px;   
  149. -webkit-animation: 回転 10000 ミリ秒 リニア 無限;   
  150. -moz-animation: 回転 10000 ミリ秒 リニア 無限;   
  151. -ms-animation: 回転 10000 ミリ秒 リニア 無限;   
  152. アニメーション: 回転 10000 ミリ秒 リニア 無限;   
  153. }
  154. #shadow3{
  155. 幅:60px;   
  156. 高さ:60px;   
  157. -webkit-border-radius:30px;   
  158. -moz-border-radius:30px;   
  159. ボーダー-半径:30px;   
  160. 位置:絶対;   
  161. 左:206px;   
  162. トップ:31px;   
  163. }  
  165. /*gear-system-3*/
  166. #gear9{
  167. 背景: url(FgFnjks.png) 繰り返しなし -371px -280px;   
  168. 幅: 234px;   
  169. 高さ: 234px;   
  170. 位置:絶対;   
  171. 左:197px;   
  172. トップ:96px;   
  174. -webkit-animation: 回転 12000 ミリ秒 リニア 無限;   
  175. -moz-animation: 回転 12000 ミリ秒 リニア 無限;   
  176. -ms-animation: 回転 12000 ミリ秒 リニア 無限;   
  177. アニメーション: 回転 12000 ミリ秒 リニア 無限;   
  178. }
  179. #shadow9{
  180. 幅:200px;   
  181. 高さ:200px;   
  182. -webkit-border-radius:100px;   
  183. -moz-border-radius:100px;   
  184. ボーダー-半径:100px;   
  185. 位置:絶対;   
  186. 左:214px;   
  187. トップ:113px;   
  188. }
  189. #gear7{
  190. 背景: url(FgFnjks.png) 繰り返しなし -371px 0;   
  191. 幅: 108px;   
  192. 高さ: 108px;   
  193. 位置:絶対;   
  194. 左:260px;   
  195. トップ:159px;   
  197. -webkit-animation: 回転バック 10000ms リニア無限;   
  198. -moz-animation: 回転バック 10000ms リニア無限;   
  199. -ms-animation: 回転バック 10000ms リニア無限大;   
  200. アニメーション: 回転バック 10000 ミリ秒 リニア無限。   
  201. }  
  202. #shadow7{
  203. 幅:76px;   
  204. 高さ:76px;   
  205. -webkit-border-radius:38px;   
  206. -moz-border-radius: 38px;   
  207. ボーダー-半径: 38px;   
  208. 位置:絶対;   
  209. 左:276px;   
  210. トップ:175px;   
  211. }
  213. /*gear-system-4*/
  214. #gear6{
  215. 背景: url(FgFnjks.png) 繰り返しなし 0 -1931px;   
  216. 幅: 134px;   
  217. 高さ: 134px;   
  218. 位置:絶対;   
  219. 左:305px;   
  220. 下下:212px;   
  222. -webkit-animation: 回転バック 10000ms リニア無限;   
  223. -moz-animation: 回転バック 10000ms リニア無限;   
  224. -ms-animation: 回転バック 10000ms リニア無限大;   
  225. アニメーション: 回転バック 10000 ミリ秒 リニア無限。   
  226. }
  227. #shadow6{
  228. 幅:98px;   
  229. 高さ:98px;   
  230. -webkit-border-radius:49px;   
  231. -moz-border-radius: 49px;   
  232. ボーダー-半径: 49px;   
  233. 位置:絶対;   
  234. 左:323px;   
  235. 下下:230px;   
  236. }  
  237. #gear4{
  238. 背景: url(FgFnjks.png) 繰り返しなし 0 -1627px;   
  239. 幅: 69px;   
  240. 高さ: 69px;   
  241. 位置:絶対;   
  242. 左:337px;   
  243. 下下:245px;   
  245. -webkit-animation: 回転バック 10000ms リニア無限;   
  246. -moz-animation: 回転バック 10000ms リニア無限;   
  247. -ms-animation: 回転バック 10000ms リニア無限大;   
  248. アニメーション: 回転バック 10000 ミリ秒 リニア無限。   
  249. }
  251. /*gear-system-5*/
  252. #gear12{
  253. 背景: url(FgFnjks.png) 繰り返しなし 0 -530px;   
  254. 幅: 164px;   
  255. 高さ: 164px;   
  256. 位置:絶対;   
  257. 左:208px;   
  258. 下下:85px;   
  260. -webkit-animation: 8000 ミリ秒のリニア無限回転。   
  261. -moz-animation: 8000 ミリ秒のリニア無限回転。   
  262. -ms-animation: 8000 ミリ秒、リニア、無限に回転します。   
  263. アニメーション: 8000 ミリ秒のリニア無限回転。   
  264. }  
  265. #shadow12{
  266. 幅:124px;   
  267. 高さ:124px;   
  268. -webkit-border-radius:62px;   
  269. -moz-border-radius:62px;   
  270. ボーダー-半径:62px;   
  271. 位置:絶対;   
  272. 左:225px;   
  273. 下下:107px;   
  274. }
  275. #gear11{
  276. 背景: url(FgFnjks.png) 繰り返しなし 0 -356px;   
  277. 幅: 125px;   
  278. 高さ: 124px;   
  279. 位置:絶対;   
  280. 左:228px;   
  281. 下下:105px;   
  283. -webkit-animation: 回転バック 10000ms リニア無限;   
  284. -moz-animation: 回転バック 10000ms リニア無限;   
  285. -ms-animation: 回転バック 10000ms リニア無限大;   
  286. アニメーション: 回転バック 10000 ミリ秒 リニア無限。   
  287. }
  288. #shadow11{
  289. 幅:88px;   
  290. 高さ:88px;   
  291. -webkit-border-radius:44px;   
  292. -moz-border-radius:44px;   
  293. ボーダー-半径:44px;   
  294. 位置:絶対;   
  295. 左:247px;   
  296. 下下:123px;   
  297. }  
  298. #gear8{
  299. 背景: url(FgFnjks.png) 繰り返しなし -371px -158px;   
  300. 幅: 72px;   
  301. 高さ: 72px;   
  302. 位置:絶対;   
  303. 左:254px;   
  304. 下下:131px;   
  306. -webkit-animation: 回転 6000 ミリ秒 リニア 無限;   
  307. -moz-animation: 回転 6000 ミリ秒 リニア 無限;   
  308. -ms-animation: 回転 6000 ミリ秒 リニア 無限;   
  309. アニメーション: 6000 ミリ秒のリニア無限回転。   
  310. }
  311. #shadow8{
  312. 幅:42px;   
  313. 高さ:42px;   
  314. -webkit-border-radius:21px;   
  315. -moz-border-radius: 21px;   
  316. ボーダー-半径: 21px;   
  317. 位置:絶対;   
  318. 左:269px;   
  319. 下下:146px;   
  320. }  
  322. /*gear1*/
  323. #gear1{
  324. 背景: url(FgFnjks.png) 繰り返しなし 0 0;   
  325. 幅: 135px;   
  326. 高さ: 134px;   
  327. 位置:絶対;   
  328. 左:83px;   
  329. 下下:111px;   
  331. -webkit-animation: 回転バック 10000ms リニア無限;   
  332. -moz-animation: 回転バック 10000ms リニア無限;   
  333. -ms-animation: 回転バック 10000ms リニア無限大;   
  334. アニメーション: 回転バック 10000 ミリ秒 リニア無限。   
  335. }
  336. #shadow1{
  337. 幅:96px;   
  338. 高さ:96px;   
  339. -webkit-border-radius:48px;   
  340. -moz-border-radius:48px;   
  341. ボーダー-半径:48px;   
関連ラベル：
html5
ソース：php.cn
前の記事：HTML5 の WebSocket とサーバー プッシュ イベントの簡単な分析_html5 チュートリアル スキル 次の記事：HTML5_html5チュートリアルスキルで通信APIの基本的な使い方を詳しく解説
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート