TweenMax.js+svg实现的星空中飞船火箭动画效果源码.zip资源-CSDN文库

共4个文件

js：2个

html：1个

css：1个

版权申诉

91 浏览量 2022-11-01 00:09:13 上传评论收藏 43KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

TweenMax.js+svg实现的星空中飞船火箭动画效果源码.zip （4个子文件）

132687015279503849

css

style.css 551B

index.html 7KB

TweenMax.min.js 114KB

script.js 2KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Rocket Journey - WIP</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <svg xmlns="" xmlns:xlink="" viewBox="0 0 3000 2000" enable-background="new 0 0 3000 2000"> <path fill="#2e2344" d="M3000 2000H0V0h3000v2000"/> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="860.02" y1="488" x2="860.98" y2="488" gradientTransform="scale(2050.8682 -2050.8682) rotate(-90 186.37 673.64)"> <stop offset="0" stop-color="#4a153d"/> <stop offset="1" stop-color="#222565"/> </linearGradient> <path fill="url(#SVGID_1_)" d="M3000 0H0v2000h3000V0"/> <g id="star-container"></g> <g id="planet-container"></g> <g id="rocket"> <path id="flame_5_" d="M1550.3 1360.7c0-27.8-22.5-50.3-50.3-50.3s-50.3 22.5-50.3 50.3c0 27.8 22.5 133.9 50.3 133.9s50.3-106.1 50.3-133.9z" fill="#dd6900"/> <path id="flame_4_" d="M1532.7 1357.7c0-20.1-14.6-36.4-32.7-36.4s-32.7 16.3-32.7 36.4 14.6 97 32.7 97 32.7-76.9 32.7-97z" fill="#f4a422"/> <path id="flame_3_" d="M1519.2 1349.7c0-14.5-8.6-26.2-19.2-26.2s-19.2 11.7-19.2 26.2 8.6 69.8 19.2 69.8 19.2-55.3 19.2-69.8z" fill="#f7cc43"/> <g class="thruster"> <path d="M1546.6 1355.5h-93.2c-6 0-10.9-4.9-10.9-10.9v-64.7c0-6 4.9-10.9 10.9-10.9h93.2c6 0 10.9 4.9 10.9 10.9v64.7c0 6-4.9 10.9-10.9 10.9z" fill="#bababa"/> <path class="st6" d="M1557.2 1327.8h-114.5c-3.7 0-6.8-3-6.8-6.8v-8.3c0-3.7 3-6.8 6.8-6.8h114.5c3.7 0 6.8 3 6.8 6.8v8.3c0 3.8-3 6.8-6.8 6.8z"/> <path class="st6" d="M1557.2 1355.8h-114.5c-3.7 0-6.8-3-6.8-6.8v-8.3c0-3.7 3-6.8 6.8-6.8h114.5c3.7 0 6.8 3 6.8 6.8v8.3c0 3.8-3 6.8-6.8 6.8z"/> <path class="st6" d="M1557.2 1299.8h-114.5c-3.7 0-6.8-3-6.8-6.8v-8.3c0-3.7 3-6.8 6.8-6.8h114.5c3.7 0 6.8 3 6.8 6.8v8.3c0 3.8-3 6.8-6.8 6.8z"/> </g> <path class="hull" d="M1429.6 689.9c-3.3 13.6-4.9 27.5-4.9 41.4V1253c0 11.1 9 20 20 20h110.6c11.1 0 20-9 20-20V731.3c0-14-1.7-27.9-4.9-41.4" fill="#c2d1d3"/> <g id="windows"> <circle class="st8" cx="1500" cy="799" r="37.5"/> <circle class="st9" cx="1500" cy="799" r="33.5"/> <circle class="st8" cx="1500" cy="896.5" r="37.5"/> <circle class="st9" cx="1500" cy="896.5" r="33.5"/> <circle class="st8" cx="1500" cy="994.1" r="37.5"/> <circle class="st9" cx="1500" cy="994.1" r="33.5"/> </g> <path class="rocket-red" d="M1442.5 1111.5l-79 60c-52.2 39.6-57 81.7-57 124.4v89c0 1.5 1.2 2.7 2.7 2.7 1.3 0 2.5-1 2.6-2.3l5.7-42.7c5.8-50.5 47.6-89.6 95-108.2l30-11.8"/> <path class="rocket-red" d="M1557 1112l79 60c52.2 39.6 57 81.7 57 124.4v89c0 1.5-1.2 2.7-2.7 2.7-1.3 0-2.5-1-2.6-2.3l-5.7-42.7c-5.8-50.5-47.6-89.6-95-108.2l-30-11.8"/> <path class="rocket-red" d="M1574.4 713.5c-.8-7.9-2.1-15.8-4-23.6 0 0-46.4-197.2-70.4-197.2s-70.4 197.2-70.4 197.2c-1.9 7.8-3.2 15.6-4 23.6h148.8z"/> <path class="st11" d="M1450.2 1151.7V727.3c0-9.2.7-18.3 2.2-27.4l1.4-8.5 13.1-63.9"/> <path class="st11" d="M1471.2 611.2l2.6-13.2"/> </g>  </g> <svg xmlns="" viewBox="0 0 413.7 413.7" > <g id="planet-sprite-1"> <g id="planet"> <circle cx="206.8" cy="206.8" r="95.7" opacity=".12" fill="#c3a9ed"/> <defs> <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="77.4" y="88.4" width="261.8" height="236.8"> <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/> </filter> </defs> <mask maskUnits="userSpaceOnUse" x="77.4" y="88.4" width="261.8" height="236.8" id="planet_3_"> <g filter="url(#Adobe_OpacityMaskFilter)"> <path d="M254.5 128.7c2.3 8.8 3.5 18 3.5 27.6 0 60.6-49.1 109.6-109.6 109.6-4 0-8-.2-11.9-.6 16.8 20.2 42.1 33 70.4 33 50.5 0 91.5-41 91.5-91.5-.1-33-17.7-62-43.9-78.1z" opacity=".19"/> <circle cx="206.8" cy="206.8" r="91.5" fill="#fff"/> </g> </mask> <g id="planet_2_" mask="url(#planet_3_)"> <circle cx="206.8" cy="206.8" r="91.5" fill="#ea6e1b"/> <g opacity=".54"> <path opacity=".1" fill="#0c0c0c" d="M111.8 88.4h190.7v33.8H111.8z"/> <path opacity=".06" fill="#0c0c0c" d="M111.8 122.3h190.7v33.8H111.8z"/> <path opacity=".19" fill="#0c0c0c" d="M111.8 156.1h190.7v33.8H111.8z"/> <path opacity=".13" fill="#eaeaea" d="M111.8 189.9h190.7v33.8H111.8z"/> <path opacity=".21" fill="#0c0c0c" d="M111.8 223.7h190.7v33.8H111.8z"/> <path opacity=".08" fill="#0c0c0c" d="M111.8 257.6h190.7v33.8H111.8z"/> <path opacity=".12" fill="#eaeaea" d="M111.8 291.4h190.7v33.8H111.8z"/> </g> <path class="planet-14" d="M326.5 185.7h-93.1c-7 0-12.6 5.7-12.6 12.6s5.7 12.6 12.6 12.6h93.1a12.61 12.61 0 0 0 0-25.2z"/> <path class="planet-14" d="M183.1 247.1H90a12.61 12.61 0 0 0 0 25.2h93.1c7 0 12.6-5.7 12.6-12.6.1-7-5.6-12.6-12.6-12.6z"/> <path class="planet-15" d="M189.3 149.6H96.2a12.61 12.61 0 0 0 0 25.2h93.1c7 0 12.6-5.7 12.6-12.6.1-6.9-5.6-12.6-12.6-12.6z"/> <path class="planet-15" d="M317.9 213.5H160.5a12.61 12.61 0 0 0 0 25.2h157.4c7 0 12.6-5.7 12.6-12.6 0-6.9-5.7-12.6-12.6-12.6z"/> </g> </g> <path d="M243.7 123.1a94.06 94.06 0 0 1 12.4 46.9c0 52.2-42.3 94.6-94.6 94.6-10.2 0-20-1.6-29.2-4.6a91.43 91.43 0 0 0 74.5 38.3c50.5 0 91.5-41 91.5-91.5 0-37.4-22.5-69.5-54.6-83.7z" id="shadow_2_" opacity=".2"/> <g id="rings_4_"> <path d="M291.7 172.3c3.4 8.5 5.6 17.6 6.3 27.1 23.6 3.8 38.2 9.2 38.2 15.1 0 11.7-58 21.2-129.5 21.2s-129.5-9.5-129.5-21.2c0-5.9 14.8-11.3 38.6-15.1.7-9.5 2.9-18.6 6.3-27.1C50.2 179.5 0 195.7 0 214.5c0 25.5 92.6 46.2 206.8 46.2s206.8-20.7 206.8-46.2c.1-18.8-50-34.9-121.9-42.2z" fill="#0e6b9e"/> <path d="M294.1 178.8c2.1 6.6 3.5 13.5 4 20.6 23.6 3.8 38.2 9.2 38.2 15.1 0 11.7-58 21.2-129.5 21.2s-129.5-9.5-129.5-21.2c0-5.9 14.8-11.3 38.6-15.1.5-7.1 1.9-14 4-20.6-60.7 6.7-102.1 20.2-102.1 35.7 0 22.2 84.6 40.2 189 40.2s189-18 189-40.2c0-15.5-41.3-29-101.7-35.7z" fill="#74bbe2"/> <path d="M295.6 184.4c1.2 4.9 2 9.9 2.4 15.1 23.6 3.8 38.2 9.2 38.2 15.1 0 11.7-58 21.2-129.5 21.2s-129.5-9.5-129.5-21.2c0-5.9 14.8-11.3 38.6-15.1.4-5.2 1.2-10.2 2.4-15.1-46.6 6.3-77.5 17.5-77.5 30.2 0 19.7 74.3 35.6 165.9 35.6s165.9-16 165.9-35.6c.3-12.8-30.5-23.9-76.9-30.2z" fill="#1c86b5"/> <path d="M297.1 191.5c.4 2.6.8 5.3 1 7.9 23.6 3.8 38.2 9.2 38.2 15.1 0 11.7-58 21.2-129.5 21.2s-129.5-9.5-129.5-21.2c0-5.9 14.8-11.3 38.6-15.1.2-2.7.5-5.3 1-7.9-33.4 5.4-54.9 13.7-54.9 23.1 0 16.2 64.8 27 144.7 27s144.7-10.8 144.7-27c.2-9.4-21.1-17.7-54.3-23.1z" fill="#4eafe5"/> </g> </g> </svg> </svg> <script src='js/TweenMax.min.js'></script> <script src="js/script.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉