<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 SVG星空飞船火箭动画特效 - 【更多源码：www.96flw.com】</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>
<!-- Stars -->
</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>
