火箭发射演示动画资源-CSDN文库

共3个文件

js：1个

css：1个

html：1个

html

需积分: 50 88 浏览量 2019-03-21 14:32:42 上传评论 2 收藏 6KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

huojianfashe.zip （3个子文件）

火箭发射演示动画

index.html 3KB

index.js 1KB

css

style.css 3KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>HTML5 SVG火箭发射演示动画- 源码之家</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="rocket-animation"> <div id="rocket-takeoff-wrapper"> <div id="rocket-wrapper"> <svg id="rocket" viewBox="0 0 251.5 396"> <path id="Right_Fin" data-name="Right Fin" d="M1328.2,674.1s78.2,0,78.2,31.3S1422,846,1422,846s-46.9-156.3-93.8-125S1312.6,689.7,1328.2,674.1Z" transform="translate(-1170.5 -450)" fill="#314d51"/> <path id="Left_Fin" data-name="Left Fin" d="M1264.2,674.1s-78.1,0-78.1,31.3S1170.5,846,1170.5,846s46.9-156.3,93.7-125S1279.9,689.7,1264.2,674.1Z" transform="translate(-1170.5 -450)" fill="#314d51"/> <g id="Base_Rocket" data-name="Base Rocket"> <path d="M1339.7,792c45.4-104.1,92.6-274.3-43.8-342-136.5,67.7-89.2,237.9-43.8,342Z" transform="translate(-1170.5 -450)" fill="#578476"/> </g> <g id="Shaded_Rocket" data-name="Shaded Rocket"> <path d="M1296,450h-.2c-136.3,67.7-89.1,237.9-43.7,342H1296Z" transform="translate(-1170.5 -450)" fill="#04665a"/> </g> <g id="Bottom_Ring" data-name="Bottom Ring"> <path d="M1227.7,727.9c2.5,7.6,5.1,15.2,7.8,22.6a334.4,334.4,0,0,0,120.8,0c2.7-7.3,5.3-14.9,7.8-22.6-18.6,6.3-42.3,10.1-68.1,10.1S1246.3,734.2,1227.7,727.9Z" transform="translate(-1170.5 -450)" fill="#314d51"/> </g> <g id="Top_Ring" data-name="Top Ring"> <path d="M1296,498c19,0,36.2-4.9,49.1-12.9a156.4,156.4,0,0,0-12.5-11.8c-8.8,7.8-22,12.7-36.6,12.7s-27.9-5-36.7-12.8a156.4,156.4,0,0,0-12.5,11.8C1259.7,493.1,1277,498,1296,498Z" transform="translate(-1170.5 -450)" fill="#314d51"/> </g> <circle id="Window" cx="125.5" cy="126" r="36" fill="#314d51" stroke="#f9f9f9" stroke-miterlimit="10" stroke-width="10"/> <path id="Middle_Fin" data-name="Middle Fin" d="M1312.4,679.8c0-7.6-7.4-13.8-16.4-13.8s-16.4,6.2-16.4,13.8S1296,846,1296,846,1312.4,687.5,1312.4,679.8Z" transform="translate(-1170.5 -450)" fill="#314d51"/> <path d="M1260,792" transform="translate(-1170.5 -450)" fill="#314d51"/> </svg> <div class="thruster"> <div class="flame-wrapper"> <div class="flame red"></div> <div class="flame orange"></div> <div class="flame gold"></div> <div class="flame white"></div> </div> </div> </div> </div> <svg id="planet" viewBox="0 0 2560 445"> <g id="Layer_2" data-name="Layer 2"> <g id="Content"> <path d="M0,445H2560V355.3C2211.6,133.3,1765,0,1278,0,792.9,0,347.8,132.3,0,352.8Z" fill="#ffa440"/> </g> </g> </svg> <div id="sky"></div> </div> <div id="stars"></div> <script src="js/index.js"></script> <div style="text-align:center;"> <p>更多源码：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p> </div> </body> </html>

评论收藏

内容反馈