基于HTML5的齿轮动画特效

网络
我们从自然手上收到的最大礼物就是生命。我必须拼命的奔跑我知道有很多人等着看我狼狈跌倒的下场嘲笑我不自量力

这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <divid="level">
  2. <divid="content">
  3. <divid="gears">
  4. <divid="gears-static"></div>
  5. <divid="gear-system-1">
  6. <divclass="shadow"id="shadow15"></div>
  7. <divid="gear15"></div>
  8. <divclass="shadow"id="shadow14"></div>
  9. <divid="gear14"></div>
  10. <divclass="shadow"id="shadow13"></div>
  11. <divid="gear13"></div>
  12. </div>
  13. <divid="gear-system-2">
  14. <divclass="shadow"id="shadow10"></div>
  15. <divid="gear10"></div>
  16. <divclass="shadow"id="shadow3"></div>
  17. <divid="gear3"></div>
  18. </div>
  19. <divid="gear-system-3">
  20. <divclass="shadow"id="shadow9"></div>
  21. <divid="gear9"></div>
  22. <divclass="shadow"id="shadow7"></div>
  23. <divid="gear7"></div>
  24. </div>
  25. <divid="gear-system-4">
  26. <divclass="shadow"id="shadow6"></div>
  27. <divid="gear6"></div>
  28. <divid="gear4"></div>
  29. </div>
  30. <divid="gear-system-5">
  31. <divclass="shadow"id="shadow12"></div>
  32. <divid="gear12"></div>
  33. <divclass="shadow"id="shadow11"></div>
  34. <divid="gear11"></div>
  35. <divclass="shadow"id="shadow8"></div>
  36. <divid="gear8"></div>
  37. </div>
  38. <divclass="shadow"id="shadow1"></div>
  39. <divid="gear1"></div>
  40. <divid="gear-system-6">
  41. <divclass="shadow"id="shadow5"></div>
  42. <divid="gear5"></div>
  43. <divid="gear2"></div>
  44. </div>
  45. <divclass="shadow"id="shadowweight"></div>
  46. <divid="chain-circle"></div>
  47. <divid="chain"></div>
  48. <divid="weight"></div>
  49. </div>
  50. </div>
  51. </div>

CSS代码

CSS Code复制内容到剪贴板
  1. #level{
  2. width:100%;
  3. height:1px;
  4. position:absolute;
  5. top:50%;
  6. }
  7. #content{
  8. text-align:center;
  9. margin-top:-327px;
  10. }
  11. #gears{
  12. width:478px;
  13. height:655px;
  14. position:relative;
  15. display:inline-block;
  16. vertical-align:middle;
  17. }
  18. #gears-static{
  19. background:url(FgFnjks.png)no-repeat-363px-903px;
  20. width:329px;
  21. height:602px;
  22. position:absolute;
  23. bottombottom:5px;
  24. rightright:0px;
  25. opacity:0.4;
  26. }
  27. #title{
  28. vertical-align:middle;
  29. color:#9EB7B5;
  30. width:43%;
  31. display:inline-block;
  32. }
  33. #titleh1{
  34. font-family:'PTSansNarrowBold',sans-serif;
  35. font-size:3.6em;
  36. text-shadow:rgba(0,0,0,0.36)7px7px10px;
  37. }
  38. #titlep{
  39. font-family:sans-serif;
  40. font-size:1.2em;
  41. line-height:148%;
  42. text-shadow:rgba(0,0,0,0.36)1px1px0px;
  43. }
  45. .shadow{
  46. -webkit-box-shadow:4px7px25px10pxrgba(43,36,0,0.36);
  47. -moz-box-shadow:4px7px25px10pxrgba(43,36,0,0.36);
  48. box-shadow:4px7px25px10pxrgba(43,36,0,0.36);
  49. }
  51. /*gear-system-1*/
  52. #gear15{
  53. background:url(FgFnjks.png)no-repeat0-993px;
  54. width:321px;
  55. height:321px;
  56. position:absolute;
  57. left:45px;
  58. top:179px;
  60. -webkit-animation:rotate-back24000mslinearinfinite;
  61. -moz-animation:rotate-back24000mslinearinfinite;
  62. -ms-animation:rotate-back24000mslinearinfinite;
  63. animation:rotate-back24000mslinearinfinite;
  64. }
  65. #shadow15{
  66. width:306px;
  67. height:306px;
  68. -webkit-border-radius:153px;
  69. -moz-border-radius:153px;
  70. border-radius:153px;
  71. position:absolute;
  72. left:52px;
  73. top:186px;
  74. }
  75. #gear14{
  76. background:url(FgFnjks.png)no-repeat0-856px;
  77. width:87px;
  78. height:87px;
  79. position:absolute;
  80. left:162px;
  81. top:296px;
  82. }
  83. #shadow14{
  84. width:70px;
  85. height:70px;
  86. -webkit-border-radius:35px;
  87. -moz-border-radius:35px;
  88. border-radius:35px;
  89. position:absolute;
  90. left:171px;
  91. top:304px;
  92. }
  93. #gear13{
  94. background:url(FgFnjks.png)no-repeat0-744px;
  95. width:62px;
  96. height:62px;
  97. position:absolute;
  98. left:174px;
  99. top:309px;
  101. -webkit-animation:rotate8000mslinearinfinite;
  102. -moz-animation:rotate8000mslinearinfinite;
  103. -ms-animation:rotate8000mslinearinfinite;
  104. animation:rotate8000mslinearinfinite;
  105. }
  106. #shadow13{
  107. width:36px;
  108. height:36px;
  109. -webkit-border-radius:18px;
  110. -moz-border-radius:18px;
  111. border-radius:18px;
  112. position:absolute;
  113. left:187px;
  114. top:322px;
  115. }
  117. /*gear-system-2*/
  118. #gear10{
  119. background:url(FgFnjks.png)no-repeat0-184px;
  120. width:122px;
  121. height:122px;
  122. position:absolute;
  123. left:175px;
  124. top:0;
  126. -webkit-animation:rotate-back8000mslinearinfinite;
  127. -moz-animation:rotate-back8000mslinearinfinite;
  128. -ms-animation:rotate-back8000mslinearinfinite;
  129. animation:rotate-back8000mslinearinfinite;
  130. }
  131. #shadow10{
  132. width:86px;
  133. height:86px;
  134. -webkit-border-radius:43px;
  135. -moz-border-radius:43px;
  136. border-radius:43px;
  137. position:absolute;
  138. left:193px;
  139. top:18px;
  140. }
  141. #gear3{
  142. background:url(FgFnjks.png)no-repeat0-1493px;
  143. width:85px;
  144. height:84px;
  145. position:absolute;
  146. left:194px;
  147. top:19px;
  149. -webkit-animation:rotate10000mslinearinfinite;
  150. -moz-animation:rotate10000mslinearinfinite;
  151. -ms-animation:rotate10000mslinearinfinite;
  152. animation:rotate10000mslinearinfinite;
  153. }
  154. #shadow3{
  155. width:60px;
  156. height:60px;
  157. -webkit-border-radius:30px;
  158. -moz-border-radius:30px;
  159. border-radius:30px;
  160. position:absolute;
  161. left:206px;
  162. top:31px;
  163. }
  165. /*gear-system-3*/
  166. #gear9{
  167. background:url(FgFnjks.png)no-repeat-371px-280px;
  168. width:234px;
  169. height:234px;
  170. position:absolute;
  171. left:197px;
  172. top:96px;
  174. -webkit-animation:rotate12000mslinearinfinite;
  175. -moz-animation:rotate12000mslinearinfinite;
  176. -ms-animation:rotate12000mslinearinfinite;
  177. animation:rotate12000mslinearinfinite;
  178. }
  179. #shadow9{
  180. width:200px;
  181. height:200px;
  182. -webkit-border-radius:100px;
  183. -moz-border-radius:100px;
  184. border-radius:100px;
  185. position:absolute;
  186. left:214px;
  187. top:113px;
  188. }
  189. #gear7{
  190. background:url(FgFnjks.png)no-repeat-371px0;
  191. width:108px;
  192. height:108px;
  193. position:absolute;
  194. left:260px;
  195. top:159px;
  197. -webkit-animation:rotate-back10000mslinearinfinite;
  198. -moz-animation:rotate-back10000mslinearinfinite;
  199. -ms-animation:rotate-back10000mslinearinfinite;
  200. animation:rotate-back10000mslinearinfinite;
  201. }
  202. #shadow7{
  203. width:76px;
  204. height:76px;
  205. -webkit-border-radius:38px;
  206. -moz-border-radius:38px;
  207. border-radius:38px;
  208. position:absolute;
  209. left:276px;
  210. top:175px;
  211. }
  213. /*gear-system-4*/
  214. #gear6{
  215. background:url(FgFnjks.png)no-repeat0-1931px;
  216. width:134px;
  217. height:134px;
  218. position:absolute;
  219. left:305px;
  220. bottombottom:212px;
  222. -webkit-animation:rotate-back10000mslinearinfinite;
  223. -moz-animation:rotate-back10000mslinearinfinite;
  224. -ms-animation:rotate-back10000mslinearinfinite;
  225. animation:rotate-back10000mslinearinfinite;
  226. }
  227. #shadow6{
  228. width:98px;
  229. height:98px;
  230. -webkit-border-radius:49px;
  231. -moz-border-radius:49px;
  232. border-radius:49px;
  233. position:absolute;
  234. left:323px;
  235. bottombottom:230px;
  236. }
  237. #gear4{
  238. background:url(FgFnjks.png)no-repeat0-1627px;
  239. width:69px;
  240. height:69px;
  241. position:absolute;
  242. left:337px;
  243. bottombottom:245px;
  245. -webkit-animation:rotate-back10000mslinearinfinite;
  246. -moz-animation:rotate-back10000mslinearinfinite;
  247. -ms-animation:rotate-back10000mslinearinfinite;
  248. animation:rotate-back10000mslinearinfinite;
  249. }
  251. /*gear-system-5*/
  252. #gear12{
  253. background:url(FgFnjks.png)no-repeat0-530px;
  254. width:164px;
  255. height:164px;
  256. position:absolute;
  257. left:208px;
  258. bottombottom:85px;
  260. -webkit-animation:rotate8000mslinearinfinite;
  261. -moz-animation:rotate8000mslinearinfinite;
  262. -ms-animation:rotate8000mslinearinfinite;
  263. animation:rotate8000mslinearinfinite;
  264. }
  265. #shadow12{
  266. width:124px;
  267. height:124px;
  268. -webkit-border-radius:62px;
  269. -moz-border-radius:62px;
  270. border-radius:62px;
  271. position:absolute;
  272. left:225px;
  273. bottombottom:107px;
  274. }
  275. #gear11{
  276. background:url(FgFnjks.png)no-repeat0-356px;
  277. width:125px;
  278. height:124px;
  279. position:absolute;
  280. left:228px;
  281. bottombottom:105px;
  283. -webkit-animation:rotate-back10000mslinearinfinite;
  284. -moz-animation:rotate-back10000mslinearinfinite;
  285. -ms-animation:rotate-back10000mslinearinfinite;
  286. animation:rotate-back10000mslinearinfinite;
  287. }
  288. #shadow11{
  289. width:88px;
  290. height:88px;
  291. -webkit-border-radius:44px;
  292. -moz-border-radius:44px;
  293. border-radius:44px;
  294. position:absolute;
  295. left:247px;
  296. bottombottom:123px;
  297. }
  298. #gear8{
  299. background:url(FgFnjks.png)no-repeat-371px-158px;
  300. width:72px;
  301. height:72px;
  302. position:absolute;
  303. left:254px;
  304. bottombottom:131px;
  306. -webkit-animation:rotate6000mslinearinfinite;
  307. -moz-animation:rotate6000mslinearinfinite;
  308. -ms-animation:rotate6000mslinearinfinite;
  309. animation:rotate6000mslinearinfinite;
  310. }
  311. #shadow8{
  312. width:42px;
  313. height:42px;
  314. -webkit-border-radius:21px;
  315. -moz-border-radius:21px;
  316. border-radius:21px;
  317. position:absolute;
  318. left:269px;
  319. bottombottom:146px;
  320. }
  322. /*gear1*/
  323. #gear1{
  324. background:url(FgFnjks.png)no-repeat00;
  325. width:135px;
  326. height:134px;
  327. position:absolute;
  328. left:83px;
  329. bottombottom:111px;
  331. -webkit-animation:rotate-back10000mslinearinfinite;
  332. -moz-animation:rotate-back10000mslinearinfinite;
  333. -ms-animation:rotate-back10000mslinearinfinite;
  334. animation:rotate-back10000mslinearinfinite;
  335. }
  336. #shadow1{
  337. width:96px;
  338. height:96px;
  339. -webkit-border-radius:48px;
  340. -moz-border-radius:48px;
  341. border-radius:48px;
  342. position:absolute;
  343. left:103px;
  344. bottombottom:130px;
  345. }
  347. /*gear-system-6*/
  348. #gear5{
  349. background:url(FgFnjks.png)no-repeat0-1746px;
  350. width:134px;
  351. height:135px;
  352. position:absolute;
  353. left:22px;
  354. top:108px;
  356. -webkit-animation:rotate10000mslinearinfinitealternate;
  357. -moz-animation:rotate10000mslinearinfinitealternate;
  358. -ms-animation:rotate10000mslinearinfinitealternate;
  359. animation:rotate10000mslinearinfinitealternate;
  360. }
  361. #shadow5{
  362. width:96px;
  363. height:96px;
  364. -webkit-border-radius:48px;
  365. -moz-border-radius:48px;
  366. border-radius:48px;
  367. position:absolute;
  368. left:41px;
  369. top:127px;
  370. }
  371. #gear2{
  372. background:url(FgFnjks.png)no-repeat0-1364px;
  373. width:80px;
  374. height:79px;
  375. position:absolute;
  376. left:49px;
  377. top:136px;
  379. -webkit-animation:rotate-back10000mslinearinfinitealternate;
  380. -moz-animation:rotate-back10000mslinearinfinitealternate;
  381. -ms-animation:rotate-back10000mslinearinfinitealternate;
  382. animation:rotate-back10000mslinearinfinitealternate;
  383. }
  385. /*weight*/
  386. #weight{
  387. background:url(FgFnjks.png)no-repeat-371px-564px;
  388. width:34px;
  389. height:92px;
  390. position:absolute;
  391. left:1px;
  392. bottombottom:0;
  394. -webkit-animation:up10000mslinearinfinitealternate;
  395. -moz-animation:up10000mslinearinfinitealternate;
  396. -ms-animation:up10000mslinearinfinitealternate;
  397. animation:up10000mslinearinfinitealternate;
  398. }
  399. #shadowweight{
  400. width:10px;
  401. height:80px;
  402. position:absolute;
  403. left:12px;
  404. bottombottom:0px;
  406. -webkit-animation:up10000mslinearinfinitealternate;
  407. -moz-animation:up10000mslinearinfinitealternate;
  408. -ms-animation:up10000mslinearinfinitealternate;
  409. animation:up10000mslinearinfinitealternate;
  410. }
  412. /*chain*/
  413. #chain-circle{
  414. background:url(FgFnjks.png)no-repeat-371px-706px;
  415. width:146px;
  416. height:147px;
  417. position:absolute;
  418. left:17px;
  419. top:102px;
  421. -webkit-animation:rotate10000mslinearinfinitealternate;
  422. -moz-animation:rotate10000mslinearinfinitealternate;
  423. -ms-animation:rotate10000mslinearinfinitealternate;
  424. animation:rotate10000mslinearinfinitealternate;
  425. }
  426. #chain{
  427. width:1px;
  428. height:380px;
  429. border-left:2pxdotted#C8D94A;
  430. position:absolute;
  431. left:17px;
  432. top:175px;
  433. opacity:0.7;
  435. -webkit-animation:collapse10000mslinearinfinitealternate;
  436. -moz-animation:collapse10000mslinearinfinitealternate;
  437. -ms-animation:collapse10000mslinearinfinitealternate;
  438. animation:collapse10000mslinearinfinitealternate;
  439. }
  441. /*ANIMATIONS*/
  442. /*rotate*/
  443. @keyframes"rotate"{
  444. from{
  445. -webkit-transform:rotate(0deg);
  446. -moz-transform:rotate(0deg);
  447. -o-transform:rotate(0deg);
  448. -ms-transform:rotate(0deg);
  449. transform:rotate(0deg);
  450. }
  451. to{
  452. -webkit-transform:rotate(360deg);
  453. -moz-transform:rotate(360deg);
  454. -o-transform:rotate(360deg);
  455. -ms-transform:rotate(360deg);
  456. transform:rotate(360deg);
  457. }
  458. }
  460. @-moz-keyframesrotate{
  461. from{
  462. -moz-transform:rotate(0deg);
  463. transform:rotate(0deg);
  464. }
  465. to{
  466. -moz-transform:rotate(360deg);
  467. transform:rotate(360deg);
  468. }
  469. }
  471. @-webkit-keyframes"rotate"{
  472. from{
  473. -webkit-transform:rotate(0deg);
  474. transform:rotate(0deg);
  475. }
  476. to{
  477. -webkit-transform:rotate(360deg);
  478. transform:rotate(360deg);
  479. }
  480. }
  482. @-ms-keyframes"rotate"{
  483. from{
  484. -ms-transform:rotate(0deg);
  485. transform:rotate(0deg);
  486. }
  487. to{
  488. -ms-transform:rotate(360deg);
  489. transform:rotate(360deg);
  490. }
  491. }
  493. @-o-keyframes"rotate"{
  494. from{
  495. -o-transform:rotate(0deg);
  496. transform:rotate(0deg);
  497. }
  498. to{
  499. -o-transform:rotate(360deg);
  500. transform:rotate(360deg);
  501. }
  502. }
  503. /*rotate-back*/
  504. @keyframes"rotate-back"{
  505. from{
  506. -webkit-transform:rotate(0deg);
  507. -moz-transform:rotate(0deg);
  508. -o-transform:rotate(0deg);
  509. -ms-transform:rotate(0deg);
  510. transform:rotate(0deg);
  511. }
  512. to{
  513. -webkit-transform:rotate(-360deg);
  514. -moz-transform:rotate(-360deg);
  515. -o-transform:rotate(-360deg);
  516. -ms-transform:rotate(-360deg);
  517. transform:rotate(-360deg);
  518. }
  519. }
  521. @-moz-keyframesrotate-back{
  522. from{
  523. -moz-transform:rotate(0deg);
  524. transform:rotate(0deg);
  525. }
  526. to{
  527. -moz-transform:rotate(-360deg);
  528. transform:rotate(-360deg);
  529. }
  530. }
  532. @-webkit-keyframes"rotate-back"{
  533. from{
  534. -webkit-transform:rotate(0deg);
  535. transform:rotate(0deg);
  536. }
  537. to{
  538. -webkit-transform:rotate(-360deg);
  539. transform:rotate(-360deg);
  540. }
  541. }
  543. @-ms-keyframes"rotate-back"{
  544. from{
  545. -ms-transform:rotate(0deg);
  546. transform:rotate(0deg);
  547. }
  548. to{
  549. -ms-transform:rotate(-360deg);
  550. transform:rotate(-360deg);
  551. }
  552. }
  554. @-o-keyframes"rotate-back"{
  555. from{
  556. -o-transform:rotate(0deg);
  557. transform:rotate(0deg);
  558. }
  559. to{
  560. -o-transform:rotate(-360deg);
  561. transform:rotate(-360deg);
  562. }
  563. }
  564. /*weightup*/
  565. @keyframes"up"{
  566. from{
  567. bottombottom:0px;
  568. }
  569. to{
  570. bottombottom:340px;
  571. }
  572. }
  574. @-moz-keyframesup{
  575. from{
  576. bottombottom:0px;
  577. }
  578. to{
  579. bottombottom:340px;
  580. }
  581. }
  583. @-webkit-keyframes"up"{
  584. from{
  585. bottombottom:0px;
  586. }
  587. to{
  588. bottombottom:340px;
  589. }
  590. }
  592. @-ms-keyframes"up"{
  593. from{
  594. bottombottom:0px;
  595. }
  596. to{
  597. bottombottom:340px;
  598. }
  599. }
  601. @-o-keyframes"up"{
  602. from{
  603. bottombottom:0px;
  604. }
  605. to{
  606. bottombottom:340px;
  607. }
  608. }
  609. /*chainupanddown*/
  610. @keyframes"collapse"{
  611. from{
  612. height:387px;
  613. }
  614. to{
  615. height:48px;
  616. }
  617. }
  619. @-moz-keyframescollapse{
  620. from{
  621. height:387px;
  622. }
  623. to{
  624. height:48px;
  625. }
  626. }
  628. @-webkit-keyframes"collapse"{
  629. from{
  630. height:387px;
  631. }
  632. to{
  633. height:48px;
  634. }
  635. }
  637. @-ms-keyframes"collapse"{
  638. from{
  639. height:387px;
  640. }
  641. to{
  642. height:48px;
  643. }
  644. }
  646. @-o-keyframes"collapse"{
  647. from{
  648. height:387px;
  649. }
  650. to{
  651. height:48px;
  652. }
  653. }

纯CSS3实现的齿轮动画特效，希望大家喜欢。

本文基于HTML5的齿轮动画特效到此结束。生活中总会有伤害你的人，所发你仍然需要继续相信别人，只是小心些而已。小编再次感谢大家对我们的支持！