千家信息网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 开发技术 >

HTML5实现的齿轮动画特效代码

发表于：2025-01-31 作者：千家信息网编辑
千家信息网最后更新 2025年01月31日，这篇文章主要介绍"HTML5实现的齿轮动画特效代码"，在日常操作中，相信很多人在HTML5实现的齿轮动画特效代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"HTML5
千家信息网最后更新 2025年01月31日HTML5实现的齿轮动画特效代码

这篇文章主要介绍"HTML5实现的齿轮动画特效代码"，在日常操作中，相信很多人在HTML5实现的齿轮动画特效代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"HTML5实现的齿轮动画特效代码"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

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 h2{

  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. }

  44. .shadow{

  45. -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);

  46. -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);

  47. box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);

  48. }

  49. /*gear-system-1*/

  50. #gear15{

  51. background: url(FgFnjks.png) no-repeat 0 -993px;

  52. width: 321px;

  53. height: 321px;

  54. position:absolute;

  55. left:45px;

  56. top:179px;

  57. -webkit-animation: rotate-back 24000ms linear infinite;

  58. -moz-animation: rotate-back 24000ms linear infinite;

  59. -ms-animation: rotate-back 24000ms linear infinite;

  60. animation: rotate-back 24000ms linear infinite;

  61. }

  62. #shadow15{

  63. width:306px;

  64. height:306px;

  65. -webkit-border-radius:153px;

  66. -moz-border-radius:153px;

  67. border-radius:153px;

  68. position:absolute;

  69. left:52px;

  70. top:186px;

  71. }

  72. #gear14{

  73. background: url(FgFnjks.png) no-repeat 0 -856px;

  74. width: 87px;

  75. height: 87px;

  76. position:absolute;

  77. left:162px;

  78. top:296px;

  79. }

  80. #shadow14{

  81. width:70px;

  82. height:70px;

  83. -webkit-border-radius:35px;

  84. -moz-border-radius:35px;

  85. border-radius:35px;

  86. position:absolute;

  87. left:171px;

  88. top:304px;

  89. }

  90. #gear13{

  91. background: url(FgFnjks.png) no-repeat 0 -744px;

  92. width: 62px;

  93. height: 62px;

  94. position:absolute;

  95. left:174px;

  96. top:309px;

  97. -webkit-animation: rotate 8000ms linear infinite;

  98. -moz-animation: rotate 8000ms linear infinite;

  99. -ms-animation: rotate 8000ms linear infinite;

  100. animation: rotate 8000ms linear infinite;

  101. }

  102. #shadow13{

  103. width:36px;

  104. height:36px;

  105. -webkit-border-radius:18px;

  106. -moz-border-radius:18px;

  107. border-radius:18px;

  108. position:absolute;

  109. left:187px;

  110. top:322px;

  111. }

  112. /*gear-system-2*/

  113. #gear10{

  114. background: url(FgFnjks.png) no-repeat 0 -184px;

  115. width: 122px;

  116. height: 122px;

  117. position:absolute;

  118. left:175px;

  119. top:0;

  120. -webkit-animation: rotate-back 8000ms linear infinite;

  121. -moz-animation: rotate-back 8000ms linear infinite;

  122. -ms-animation: rotate-back 8000ms linear infinite;

  123. animation: rotate-back 8000ms linear infinite;

  124. }

  125. #shadow10{

  126. width:86px;

  127. height:86px;

  128. -webkit-border-radius:43px;

  129. -moz-border-radius:43px;

  130. border-radius:43px;

  131. position:absolute;

  132. left:193px;

  133. top:18px;

  134. }

  135. #gear3{

  136. background: url(FgFnjks.png) no-repeat 0 -1493px;

  137. width: 85px;

  138. height: 84px;

  139. position:absolute;

  140. left:194px;

  141. top:19px;

  142. -webkit-animation: rotate 10000ms linear infinite;

  143. -moz-animation: rotate 10000ms linear infinite;

  144. -ms-animation: rotate 10000ms linear infinite;

  145. animation: rotate 10000ms linear infinite;

  146. }

  147. #shadow3{

  148. width:60px;

  149. height:60px;

  150. -webkit-border-radius:30px;

  151. -moz-border-radius:30px;

  152. border-radius:30px;

  153. position:absolute;

  154. left:206px;

  155. top:31px;

  156. }

  157. /*gear-system-3*/

  158. #gear9{

  159. background: url(FgFnjks.png) no-repeat -371px -280px;

  160. width: 234px;

  161. height: 234px;

  162. position:absolute;

  163. left:197px;

  164. top:96px;

  165. -webkit-animation: rotate 12000ms linear infinite;

  166. -moz-animation: rotate 12000ms linear infinite;

  167. -ms-animation: rotate 12000ms linear infinite;

  168. animation: rotate 12000ms linear infinite;

  169. }

  170. #shadow9{

  171. width:200px;

  172. height:200px;

  173. -webkit-border-radius:100px;

  174. -moz-border-radius:100px;

  175. border-radius:100px;

  176. position:absolute;

  177. left:214px;

  178. top:113px;

  179. }

  180. #gear7{

  181. background: url(FgFnjks.png) no-repeat -371px 0;

  182. width: 108px;

  183. height: 108px;

  184. position:absolute;

  185. left:260px;

  186. top:159px;

  187. -webkit-animation: rotate-back 10000ms linear infinite;

  188. -moz-animation: rotate-back 10000ms linear infinite;

  189. -ms-animation: rotate-back 10000ms linear infinite;

  190. animation: rotate-back 10000ms linear infinite;

  191. }

  192. #shadow7{

  193. width:76px;

  194. height:76px;

  195. -webkit-border-radius:38px;

  196. -moz-border-radius: 38px;

  197. border-radius: 38px;

  198. position:absolute;

  199. left:276px;

  200. top:175px;

  201. }

  202. /*gear-system-4*/

  203. #gear6{

  204. background: url(FgFnjks.png) no-repeat 0 -1931px;

  205. width: 134px;

  206. height: 134px;

  207. position:absolute;

  208. left:305px;

  209. bottombottom:212px;

  210. -webkit-animation: rotate-back 10000ms linear infinite;

  211. -moz-animation: rotate-back 10000ms linear infinite;

  212. -ms-animation: rotate-back 10000ms linear infinite;

  213. animation: rotate-back 10000ms linear infinite;

  214. }

  215. #shadow6{

  216. width:98px;

  217. height:98px;

  218. -webkit-border-radius:49px;

  219. -moz-border-radius: 49px;

  220. border-radius: 49px;

  221. position:absolute;

  222. left:323px;

  223. bottombottom:230px;

  224. }

  225. #gear4{

  226. background: url(FgFnjks.png) no-repeat 0 -1627px;

  227. width: 69px;

  228. height: 69px;

  229. position:absolute;

  230. left:337px;

  231. bottombottom:245px;

  232. -webkit-animation: rotate-back 10000ms linear infinite;

  233. -moz-animation: rotate-back 10000ms linear infinite;

  234. -ms-animation: rotate-back 10000ms linear infinite;

  235. animation: rotate-back 10000ms linear infinite;

  236. }

  237. /*gear-system-5*/

  238. #gear12{

  239. background: url(FgFnjks.png) no-repeat 0 -530px;

  240. width: 164px;

  241. height: 164px;

  242. position:absolute;

  243. left:208px;

  244. bottombottom:85px;

  245. -webkit-animation: rotate 8000ms linear infinite;

  246. -moz-animation: rotate 8000ms linear infinite;

  247. -ms-animation: rotate 8000ms linear infinite;

  248. animation: rotate 8000ms linear infinite;

  249. }

  250. #shadow12{

  251. width:124px;

  252. height:124px;

  253. -webkit-border-radius:62px;

  254. -moz-border-radius:62px;

  255. border-radius:62px;

  256. position:absolute;

  257. left:225px;

  258. bottombottom:107px;

  259. }

  260. #gear11{

  261. background: url(FgFnjks.png) no-repeat 0 -356px;

  262. width: 125px;

  263. height: 124px;

  264. position:absolute;

  265. left:228px;

  266. bottombottom:105px;

  267. -webkit-animation: rotate-back 10000ms linear infinite;

  268. -moz-animation: rotate-back 10000ms linear infinite;

  269. -ms-animation: rotate-back 10000ms linear infinite;

  270. animation: rotate-back 10000ms linear infinite;

  271. }

  272. #shadow11{

  273. width:88px;

  274. height:88px;

  275. -webkit-border-radius:44px;

  276. -moz-border-radius:44px;

  277. border-radius:44px;

  278. position:absolute;

  279. left:247px;

  280. bottombottom:123px;

  281. }

  282. #gear8{

  283. background: url(FgFnjks.png) no-repeat -371px -158px;

  284. width: 72px;

  285. height: 72px;

  286. position:absolute;

  287. left:254px;

  288. bottombottom:131px;

  289. -webkit-animation: rotate 6000ms linear infinite;

  290. -moz-animation: rotate 6000ms linear infinite;

  291. -ms-animation: rotate 6000ms linear infinite;

  292. animation: rotate 6000ms linear infinite;

  293. }

  294. #shadow8{

  295. width:42px;

  296. height:42px;

  297. -webkit-border-radius:21px;

  298. -moz-border-radius: 21px;

  299. border-radius: 21px;

  300. position:absolute;

  301. left:269px;

  302. bottombottom:146px;

  303. }

  304. /*gear1*/

  305. #gear1{

  306. background: url(FgFnjks.png) no-repeat 0 0;

  307. width: 135px;

  308. height: 134px;

  309. position:absolute;

  310. left:83px;

  311. bottombottom:111px;

  312. -webkit-animation: rotate-back 10000ms linear infinite;

  313. -moz-animation: rotate-back 10000ms linear infinite;

  314. -ms-animation: rotate-back 10000ms linear infinite;

  315. animation: rotate-back 10000ms linear infinite;

  316. }

  317. #shadow1{

  318. width:96px;

  319. height:96px;

  320. -webkit-border-radius:48px;

  321. -moz-border-radius:48px;

  322. border-radius:48px;

  323. position:absolute;

  324. left:103px;

  325. bottombottom:130px;

  326. }

  327. /*gear-system-6*/

  328. #gear5{

  329. background: url(FgFnjks.png) no-repeat 0 -1746px;

  330. width: 134px;

  331. height: 135px;

  332. position:absolute;

  333. left:22px;

  334. top:108px;

  335. -webkit-animation: rotate 10000ms linear infinite alternate;

  336. -moz-animation: rotate 10000ms linear infinite alternate;

  337. -ms-animation: rotate 10000ms linear infinite alternate;

  338. animation: rotate 10000ms linear infinite alternate;

  339. }

  340. #shadow5{

  341. width:96px;

  342. height:96px;

  343. -webkit-border-radius:48px;

  344. -moz-border-radius:48px;

  345. border-radius:48px;

  346. position:absolute;

  347. left:41px;

  348. top:127px;

  349. }

  350. #gear2{

  351. background: url(FgFnjks.png) no-repeat 0 -1364px;

  352. width: 80px;

  353. height: 79px;

  354. position:absolute;

  355. left:49px;

  356. top:136px;

  357. -webkit-animation: rotate-back 10000ms linear infinite alternate;

  358. -moz-animation: rotate-back 10000ms linear infinite alternate;

  359. -ms-animation: rotate-back 10000ms linear infinite alternate;

  360. animation: rotate-back 10000ms linear infinite alternate;

  361. }

  362. /*weight*/

  363. #weight{

  364. background: url(FgFnjks.png) no-repeat -371px -564px;

  365. width: 34px;

  366. height: 92px;

  367. position:absolute;

  368. left:1px;

  369. bottombottom:0;

  370. -webkit-animation: up 10000ms linear infinite alternate;

  371. -moz-animation: up 10000ms linear infinite alternate;

  372. -ms-animation: up 10000ms linear infinite alternate;

  373. animation: up 10000ms linear infinite alternate;

  374. }

  375. #shadowweight{

  376. width:10px;

  377. height:80px;

  378. position:absolute;

  379. left:12px;

  380. bottombottom:0px;

  381. -webkit-animation: up 10000ms linear infinite alternate;

  382. -moz-animation: up 10000ms linear infinite alternate;

  383. -ms-animation: up 10000ms linear infinite alternate;

  384. animation: up 10000ms linear infinite alternate;

  385. }

  386. /*chain*/

  387. #chain-circle{

  388. background: url(FgFnjks.png) no-repeat -371px -706px;

  389. width:146px;

  390. height:147px;

  391. position:absolute;

  392. left:17px;

  393. top:102px;

  394. -webkit-animation: rotate 10000ms linear infinite alternate;

  395. -moz-animation: rotate 10000ms linear infinite alternate;

  396. -ms-animation: rotate 10000ms linear infinite alternate;

  397. animation: rotate 10000ms linear infinite alternate;

  398. }

  399. #chain{

  400. width:1px;

  401. height:380px;

  402. border-left:2px dotted #C8D94A;

  403. position:absolute;

  404. left:17px;

  405. top:175px;

  406. opacity:0.7;

  407. -webkit-animation: collapse 10000ms linear infinite alternate;

  408. -moz-animation: collapse 10000ms linear infinite alternate;

  409. -ms-animation: collapse 10000ms linear infinite alternate;

  410. animation: collapse 10000ms linear infinite alternate;

  411. }

  412. /*ANIMATIONS*/

  413. /*rotate*/

  414. @keyframes "rotate" {

  415. from {

  416. -webkit-transform: rotate(0deg);

  417. -moz-transform: rotate(0deg);

  418. -o-transform: rotate(0deg);

  419. -ms-transform: rotate(0deg);

  420. transform: rotate(0deg);

  421. }

  422. to {

  423. -webkit-transform: rotate(360deg);

  424. -moz-transform: rotate(360deg);

  425. -o-transform: rotate(360deg);

  426. -ms-transform: rotate(360deg);

  427. transform: rotate(360deg);

  428. }

  429. }

  430. @-moz-keyframes rotate {

  431. from {

  432. -moz-transform: rotate(0deg);

  433. transform: rotate(0deg);

  434. }

  435. to {

  436. -moz-transform: rotate(360deg);

  437. transform: rotate(360deg);

  438. }

  439. }

  440. @-webkit-keyframes "rotate" {

  441. from {

  442. -webkit-transform: rotate(0deg);

  443. transform: rotate(0deg);

  444. }

  445. to {

  446. -webkit-transform: rotate(360deg);

  447. transform: rotate(360deg);

  448. }

  449. }

  450. @-ms-keyframes "rotate" {

  451. from {

  452. -ms-transform: rotate(0deg);

  453. transform: rotate(0deg);

  454. }

  455. to {

  456. -ms-transform: rotate(360deg);

  457. transform: rotate(360deg);

  458. }

  459. }

  460. @-o-keyframes "rotate" {

  461. from {

  462. -o-transform: rotate(0deg);

  463. transform: rotate(0deg);

  464. }

  465. to {

  466. -o-transform: rotate(360deg);

  467. transform: rotate(360deg);

  468. }

  469. }

  470. /*rotate-back*/

  471. @keyframes "rotate-back" {

  472. from {

  473. -webkit-transform: rotate(0deg);

  474. -moz-transform: rotate(0deg);

  475. -o-transform: rotate(0deg);

  476. -ms-transform: rotate(0deg);

  477. transform: rotate(0deg);

  478. }

  479. to {

  480. -webkit-transform: rotate(-360deg);

  481. -moz-transform: rotate(-360deg);

  482. -o-transform: rotate(-360deg);

  483. -ms-transform: rotate(-360deg);

  484. transform: rotate(-360deg);

  485. }

  486. }

  487. @-moz-keyframes rotate-back {

  488. from {

  489. -moz-transform: rotate(0deg);

  490. transform: rotate(0deg);

  491. }

  492. to {

  493. -moz-transform: rotate(-360deg);

  494. transform: rotate(-360deg);

  495. }

  496. }

  497. @-webkit-keyframes "rotate-back" {

  498. from {

  499. -webkit-transform: rotate(0deg);

  500. transform: rotate(0deg);

  501. }

  502. to {

  503. -webkit-transform: rotate(-360deg);

  504. transform: rotate(-360deg);

  505. }

  506. }

  507. @-ms-keyframes "rotate-back" {

  508. from {

  509. -ms-transform: rotate(0deg);

  510. transform: rotate(0deg);

  511. }

  512. to {

  513. -ms-transform: rotate(-360deg);

  514. transform: rotate(-360deg);

  515. }

  516. }

  517. @-o-keyframes "rotate-back" {

  518. from {

  519. -o-transform: rotate(0deg);

  520. transform: rotate(0deg);

  521. }

  522. to {

  523. -o-transform: rotate(-360deg);

  524. transform: rotate(-360deg);

  525. }

  526. }

  527. /*weight up*/

  528. @keyframes "up" {

  529. from {

  530. bottombottom: 0px;

  531. }

  532. to {

  533. bottombottom: 340px;

  534. }

  535. }

  536. @-moz-keyframes up {

  537. from {

  538. bottombottom: 0px;

  539. }

  540. to {

  541. bottombottom: 340px;

  542. }

  543. }

  544. @-webkit-keyframes "up" {

  545. from {

  546. bottombottom: 0px;

  547. }

  548. to {

  549. bottombottom: 340px;

  550. }

  551. }

  552. @-ms-keyframes "up" {

  553. from {

  554. bottombottom: 0px;

  555. }

  556. to {

  557. bottombottom: 340px;

  558. }

  559. }

  560. @-o-keyframes "up" {

  561. from {

  562. bottombottom: 0px;

  563. }

  564. to {

  565. bottombottom: 340px;

  566. }

  567. }

  568. /*chain up and down*/

  569. @keyframes "collapse" {

  570. from {

  571. height: 387px;

  572. }

  573. to {

  574. height: 48px;

  575. }

  576. }

  577. @-moz-keyframes collapse {

  578. from {

  579. height: 387px;

  580. }

  581. to {

  582. height: 48px;

  583. }

  584. }

  585. @-webkit-keyframes "collapse" {

  586. from {

  587. height: 387px;

  588. }

  589. to {

  590. height: 48px;

  591. }

  592. }

  593. @-ms-keyframes "collapse" {

  594. from {

  595. height: 387px;

  596. }

  597. to {

  598. height: 48px;

  599. }

  600. }

  601. @-o-keyframes "collapse" {

  602. from {

  603. height: 387px;

  604. }

  605. to {

  606. height: 48px;

  607. }

  608. }

到此，关于"HTML5实现的齿轮动画特效代码"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！

很赞哦！
齿轮 代码 动画 特效 特效代码 学习 内容 剪贴板 更多 剪贴 帮助 实用 最大 接下来 原理 多个 效果 文章 方法 有用 数据库的安全要保护哪些东西 数据库安全各自的含义是什么 生产安全数据库录入 数据库的安全性及管理 数据库安全策略包含哪些 海淀数据库安全审计系统 建立农村房屋安全信息数据库 易用的数据库客户端支持安全管理 连接数据库失败ssl安全错误 数据库的锁怎样保障安全 数据库的分析与设计 php 减少数据库访问 网络技术与安全专业考研 数据库是由组成的 东莞学习通网络技术有限公司 连城县新南软件开发有限公司 梦网科技互联网 网络安全法倡导什么的网络行为 分类数据库实例 广州大蕃薯网络技术 网络安全贴士语 数据库表包括的内容 云服务器登录千牛后台 渭南市检察院网络安全 广州服务软件开发设计 我的世界服务器吧 数据库number类型精度 服务器时间条的很快 数据安全 数据库 彩虹六号玩哪个服务器好 计算机网络技术考二建 免费云数据库服务器 上位机数据库测试与分析 有哪些网络安全产品 软件开发产出一个页面 数据库系统软件的定义 常州网络软件开发活动方案 软件开发与制作专业可以考研吗 网络安全中心女王 如何通过两个条件查询数据库

相关文章

0