欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

基于HTML5的齿轮动画特效_html5教程技巧

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

基于HTML5的齿轮动画特效_html5教程技巧

HTML代码

XML/HTML Code复制内容到剪贴板
  1. div id="level">
  2. div id="content">
  3. div id="gears">
  4. div id="gears-static">div>
  5. div id="gear-system-1">
  6. div class="shadow" id="shadow15">div>
  7. div id="gear15">div>
  8. div class="shadow" id="shadow14">div>
  9. div id="gear14">div>
  10. div class="shadow" id="shadow13">div>
  11. div id="gear13">div>
  12. div>
  13. div id="gear-system-2">
  14. div class="shadow" id="shadow10">div>
  15. div id="gear10">div>
  16. div class="shadow" id="shadow3">div>
  17. div id="gear3">div>
  18. div>
  19. div id="gear-system-3">
  20. div class="shadow" id="shadow9">div>
  21. div id="gear9">div>
  22. div class="shadow" id="shadow7">div>
  23. div id="gear7">div>
  24. div>
  25. div id="gear-system-4">
  26. div class="shadow" id="shadow6">div>
  27. div id="gear6">div>
  28. div id="gear4">div>
  29. div>
  30. div id="gear-system-5">
  31. div class="shadow" id="shadow12">div>
  32. div id="gear12">div>
  33. div class="shadow" id="shadow11">div>
  34. div id="gear11">div>
  35. div class="shadow" 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="gear-system-6">
  41. div class="shadow" 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-circle">div>
  47. div id="chain">div>
  48. div id="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. #title h1{
  34. font-family: 'PTSansNarrowBold', sans-serif;
  35. font-size:3.6em;
  36. text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;
  37. }
  38. #title p{
  39. font-family: sans-serif;
  40. font-size:1.2em;
  41. line-height: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. /*gear-system-1*/
  52. #gear15{
  53. background: url(FgFnjks.png) no-repeat 0 -993px;
  54. width: 321px;
  55. height: 321px;
  56. position:absolute;
  57. left:45px;
  58. top:179px;
  60. -webkit-animation: rotate-back 24000ms linear infinite;
  61. -moz-animation: rotate-back 24000ms linear infinite;
  62. -ms-animation: rotate-back 24000ms linear infinite;
  63. animation: rotate-back 24000ms linear infinite;
  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-repeat 0 -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-repeat 0 -744px;
  95. width: 62px;
  96. height: 62px;
  97. position:absolute;
  98. left:174px;
  99. top:309px;
  101. -webkit-animation: rotate 8000ms linear infinite;
  102. -moz-animation: rotate 8000ms linear infinite;
  103. -ms-animation: rotate 8000ms linear infinite;
  104. animation: rotate 8000ms linear infinite;
  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-repeat 0 -184px;
  120. width: 122px;
  121. height: 122px;
  122. position:absolute;
  123. left:175px;
  124. top:0;
  126. -webkit-animation: rotate-back 8000ms linear infinite;
  127. -moz-animation: rotate-back 8000ms linear infinite;
  128. -ms-animation: rotate-back 8000ms linear infinite;
  129. animation: rotate-back 8000ms linear infinite;
  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-repeat 0 -1493px;
  143. width: 85px;
  144. height: 84px;
  145. position:absolute;
  146. left:194px;
  147. top:19px;
  149. -webkit-animation: rotate 10000ms linear infinite;
  150. -moz-animation: rotate 10000ms linear infinite;
  151. -ms-animation: rotate 10000ms linear infinite;
  152. animation: rotate 10000ms linear infinite;
  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: rotate 12000ms linear infinite;
  175. -moz-animation: rotate 12000ms linear infinite;
  176. -ms-animation: rotate 12000ms linear infinite;
  177. animation: rotate 12000ms linear infinite;
  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 -371px 0;
  191. width: 108px;
  192. height: 108px;
  193. position:absolute;
  194. left:260px;
  195. top:159px;
  197. -webkit-animation: rotate-back 10000ms linear infinite;
  198. -moz-animation: rotate-back 10000ms linear infinite;
  199. -ms-animation: rotate-back 10000ms linear infinite;
  200. animation: rotate-back 10000ms linear infinite;
  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-repeat 0 -1931px;
  216. width: 134px;
  217. height: 134px;
  218. position:absolute;
  219. left:305px;
  220. bottombottom:212px;
  222. -webkit-animation: rotate-back 10000ms linear infinite;
  223. -moz-animation: rotate-back 10000ms linear infinite;
  224. -ms-animation: rotate-back 10000ms linear infinite;
  225. animation: rotate-back 10000ms linear infinite;
  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-repeat 0 -1627px;
  239. width: 69px;
  240. height: 69px;
  241. position:absolute;
  242. left:337px;
  243. bottombottom:245px;
  245. -webkit-animation: rotate-back 10000ms linear infinite;
  246. -moz-animation: rotate-back 10000ms linear infinite;
  247. -ms-animation: rotate-back 10000ms linear infinite;
  248. animation: rotate-back 10000ms linear infinite;
  249. }
  251. /*gear-system-5*/
  252. #gear12{
  253. background: url(FgFnjks.png) no-repeat 0 -530px;
  254. width: 164px;
  255. height: 164px;
  256. position:absolute;
  257. left:208px;
  258. bottombottom:85px;
  260. -webkit-animation: rotate 8000ms linear infinite;
  261. -moz-animation: rotate 8000ms linear infinite;
  262. -ms-animation: rotate 8000ms linear infinite;
  263. animation: rotate 8000ms linear infinite;
  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-repeat 0 -356px;
  277. width: 125px;
  278. height: 124px;
  279. position:absolute;
  280. left:228px;
  281. bottombottom:105px;
  283. -webkit-animation: rotate-back 10000ms linear infinite;
  284. -moz-animation: rotate-back 10000ms linear infinite;
  285. -ms-animation: rotate-back 10000ms linear infinite;
  286. animation: rotate-back 10000ms linear infinite;
  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: rotate 6000ms linear infinite;
  307. -moz-animation: rotate 6000ms linear infinite;
  308. -ms-animation: rotate 6000ms linear infinite;
  309. animation: rotate 6000ms linear infinite;
  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-repeat 0 0;
  325. width: 135px;
  326. height: 134px;
  327. position:absolute;
  328. left:83px;
  329. bottombottom:111px;
  331. -webkit-animation: rotate-back 10000ms linear infinite;
  332. -moz-animation: rotate-back 10000ms linear infinite;
  333. -ms-animation: rotate-back 10000ms linear infinite;
  334. animation: rotate-back 10000ms linear infinite;
  335. }
  336. #shadow1{
  337. width:96px;
  338. height:96px;
  339. -webkit-border-radius:48px;
  340. -moz-border-radius:48px;
  341. border-radius:48px; 基于HTML5的齿轮动画特效_html5教程技巧

    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • 基于HTML5的齿轮动画特效_html5教程技巧

    • 专题推荐

    相关标签： HTML5 齿轮动画

    上一篇： 浅谈JavaScript中的string拥有方法的原因_javascript技巧

    下一篇： 简单js代码实现selece二级联动(推荐)_javascript技巧

    推荐阅读