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.   

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

50.   

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;   

59.   

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;   

100.   

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

116.   

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;   

125.   

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;   

148.   

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

164.   

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;   

173.   

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;   

196.   

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

212.   

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;   

221.   

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;   

244.   

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

250.   

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;   

259.   

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;   

282.   

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;   

305.   

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

321.   

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;   

330.   

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;   

342.  position:absolute;   

343.  left:103px;   

344.  bottombottom:130px;   

345. }   

346.   

347. /*gear-system-6*/  

348. #gear5{   

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

350.  width: 134px;   

351.  height: 135px;   

352.  position:absolute;   

353.  left:22px;   

354.  top:108px;   

355.   

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

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

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

359.  animation: rotate 10000ms linear infinite alternate;   

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-repeat 0 -1364px;   

373.  width: 80px;   

374.  height: 79px;   

375.  position:absolute;   

376.  left:49px;   

377.  top:136px;   

378.   

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

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

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

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

383. }   

384.   

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;   

393.   

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

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

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

397.  animation: up 10000ms linear infinite alternate;   

398. }   

399. #shadowweight{   

400.  width:10px;   

401.  height:80px;   

402.  position:absolute;   

403.  left:12px;   

404.  bottombottom:0px;   

405.   

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

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

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

409.  animation: up 10000ms linear infinite alternate;   

410. }   

411.   

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;   

420.   

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

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

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

424.  animation: rotate 10000ms linear infinite alternate;   

425. }   

426. #chain{   

427.  width:1px;   

428.  height:380px;   

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

430.  position:absolute;   

431.  left:17px;   

432.  top:175px;   

433.  opacity:0.7;   

434.   

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

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

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

438.  animation: collapse 10000ms linear infinite alternate;   

439. }   

440.   

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

459.   

460. @-moz-keyframes rotate {   

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

470.   

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

481.   

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

492.   

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

520.   

521. @-moz-keyframes rotate-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. }   

531.   

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

542.   

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

553.   

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. /*weight up*/  

565. @keyframes "up" {   

566.  from {   

567.     bottombottom: 0px;   

568.  }   

569.  to {   

570.     bottombottom: 340px;   

571.  }   

572. }   

573.   

574. @-moz-keyframes up {   

575.  from {   

576.    bottombottom: 0px;   

577.  }   

578.  to {   

579.    bottombottom: 340px;   

580.  }   

581. }   

582.   

583. @-webkit-keyframes "up" {   

584.  from {   

585.    bottombottom: 0px;   

586.  }   

587.  to {   

588.    bottombottom: 340px;   

589.  }   

590. }   

591.   

592. @-ms-keyframes "up" {   

593.  from {   

594.    bottombottom: 0px;   

595.  }   

596.  to {   

597.    bottombottom: 340px;   

598.  }   

599. }   

600.   

601. @-o-keyframes "up" {   

602.  from {   

603.    bottombottom: 0px;   

604.  }   

605.  to {   

606.    bottombottom: 340px;   

607.  }   

608. }   

609. /*chain up and down*/  

610. @keyframes "collapse" {   

611.  from {   

612.     height: 387px;   

613.  }   

614.  to {   

615.     height: 48px;   

616.  }   

617. }   

618.   

619. @-moz-keyframes collapse {   

620.  from {   

621.    height: 387px;   

622.  }   

623.  to {   

624.    height: 48px;   

625.  }   

626. }   

627.   

628. @-webkit-keyframes "collapse" {   

629.  from {   

630.    height: 387px;   

631.  }   

632.  to {   

633.    height: 48px;   

634.  }   

635. }   

636.   

637. @-ms-keyframes "collapse" {   

638.  from {   

639.    height: 387px;   

640.  }   

641.  to {   

642.    height: 48px;   

643.  }   

644. }   

645.   

646. @-o-keyframes "collapse" {   

647.  from {   

648.    height: 387px;   

649.  }   

650.  to {   

651.    height: 48px;   

652.  }   

653. }   

到此，關于“HTML5實現的齒輪動畫特效代碼”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！