<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TweenMax.js + SVG蓝天白云阳光飞艇动画</title>
<style>
html,
body {
cursor: default;
margin: 0;
padding: 0;
}
.wrapper {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #F0F5FF;
}
</style>
</head>
<body>
<!--
Illustration inspired by https://design.tutsplus.com/tutorials/how-to-create-a-zeppelin-illustration--cms-31499
Made with Sketch app.
-->
<div class="wrapper">
<svg width="725px" height="530px" viewBox="0 0 725 530" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="9.19625%" y1="57.7443496%" x2="91.5794483%" y2="14.0008817%" id="linearGradient-3">
<stop stop-color="#5C73E6" offset="0%"></stop>
<stop stop-color="#8AB1FF" offset="100%"></stop>
</linearGradient>
</defs>
<rect fill="#F0F5FF" x="0" y="0" width="725" height="530"></rect>
<g id="_back" transform="translate(33.000000, 3.000000)">
<mask id="back-mask" fill="white">
<path d="M67,111 C259,-21 325,242.971199 388,268 C451,293.028801 677,184 662,319 C647,454 522,509 330,478 C138,447 -125,243 67,111 Z M362,55 C375,-25 612,-16.3256226 604,77 C596,170.325623 578.872065,194 496.436032,187 C414,180 349,135 362,55 Z" id="back-mask-path"></path>
</mask>
<g mask="url(#back-mask)">
<g transform="translate(-33.000000, -3.000000)">
<rect fill="url(#linearGradient-3)" x="0" y="0" width="725" height="530"></rect>
<circle class="sun-light" fill-opacity="0.55" fill="#FFFF66" cx="618" cy="102" r="60"></circle>
<circle class="sun-light" fill-opacity="0.55" fill="#FFFF66" cx="618" cy="102" r="45"></circle>
<circle fill="#FFFF66" cx="618" cy="102" r="30"></circle>
<g id="clouds-back" transform="translate(0, 164)">
<g transform="translate(2065.000000, 76.000000)">
<path d="M83.4749025,119.372323 C88.0392129,111.384046 96.6408508,106 106.5,106 C121.135546,106 133,117.864454 133,132.5 C133,147.135546 121.135546,159 106.5,159 C102.585459,159 98.8691591,158.151227 95.5250975,156.627677 C90.9607871,164.615954 82.3591492,170 72.5,170 C57.8644541,170 46,158.135546 46,143.5 C46,128.864454 57.8644541,117 72.5,117 C76.4145412,117 80.1308409,117.848773 83.4749025,119.372323 Z"
id="Combined-Shape" fill="#D6E4FF"></path>
<path d="M354.25915,93.5681627 C356.114842,93.1955172 358.034588,93 360,93 C376.016258,93 389,105.983742 389,122 C389,138.016258 376.016258,151 360,151 C347.278448,151 336.4701,142.808603 332.56166,131.412516 C329.393553,132.442997 326.011824,133 322.5,133 C304.550746,133 290,118.449254 290,100.5 C290,82.5507456 304.550746,68 322.5,68 C338.070285,68 351.083228,78.949279 354.259148,93.5681551 L354.25915,93.5681627 Z"
id="Combined-Shape" fill="#D6E4FF"></path>
<path d="M417,224 L44,224 C43.8335562,223.99906 43.6668878,224 43.5,224 C19.4756134,224 0,204.524387 0,180.5 C0,156.475613 19.4756134,137 43.5,137 C53.9924306,137 63.6172165,140.714828 71.1308765,146.901003 C75.801406,134.679638 87.637084,126 101.5,126 C102.682887,126 103.851014,126.063194 105.001189,126.186391 C105.169552,103.98671 123.198934,86.0379679 145.429439,86.0000602 C145.147148,84.375746 145,82.7050572 145,81 C145,64.994593 157.966156,52.0175939 173.967452,52.0000179 C177.818118,35.3838914 192.712852,23 210.5,23 C212.982507,23 215.408672,23.2412267 217.756334,23.7015186 C224.961108,9.63071059 239.605867,0 256.5,0 C279.724012,0 298.697287,18.1995653 299.935704,41.1145734 C317.384627,46.7753562 330,63.1644391 330,82.5 C330,90.8526068 327.645869,98.6553768 323.56491,105.281008 C332.680941,107.923393 340.146039,114.450396 344.050203,122.952014 C350.698304,119.777358 358.14159,118 366,118 C391.098914,118 411.963168,136.130738 416.210101,160.009554 C416.47263,160.003198 416.735941,160 417,160 C434.673112,160 449,174.326888 449,192 C449,209.673112 434.673112,224 417,224 Z"
id="Combined-Shape" fill="#F0F5FF"></path>
</g>
<path d="M3032,245.488176 L3032,246 L2684,246 L2684,245.876779 C2665.52141,244.352326 2651,228.871991 2651,210 C2651,190.117749 2667.11775,174 2687,174 C2692.77174,174 2698.22623,175.35827 2703.06128,177.772604 C2709.7649,165.965309 2722.45225,158 2737,158 C2740.035,158 2742.98903,158.34668 2745.82465,159.002601 C2750.31843,133.430725 2772.64007,114 2799.5,114 C2803.2278,114 2806.86819,114.37427 2810.38563,115.087283 C2819.83188,98.886971 2837.39455,88 2857.5,88 C2877.48414,88 2894.95608,98.7559818 2904.44248,114.794603 C2906.87941,114.273994 2909.40771,114 2912,114 C2923.46672,114 2933.68129,119.36107 2940.27397,127.713464 C2948.05457,123.43425 2956.99301,121 2966.5,121 C2982.88693,121 2997.58467,128.232267 3007.57544,139.67901 C3012.90308,137.94015 3018.59175,137 3024.5,137 C3054.59952,137 3079,161.400481 3079,191.5 C3079,219.055026 3058.55058,241.833834 3032,245.488176 Z"
fill="#F0F5FF"></path>
<path d="M3126,41 C3126,25.536027 3138.53603,13 3154,13 C3156.98442,13 3159.85979,13.4669157 3162.55704,14.3316827 C3167.3494,5.77989046 3176.49972,0 3187,0 C3197.07522,0 3205.90756,5.3214103 3210.83973,13.3069535 C3212.19713,13.1047646 3213.58633,13 3215,13 C3230.46397,13 3243,25.536027 3243,41 L3126,41 Z"
fill="#F0F5FF"></path>
<g transform="translate(3453.000000, 79.000000)">
<path d="M110.747335,62.0075239 C110.914253,63.4819378 111,64.9809552 111,66.5 C111,85.7510261 97.2283348,101.785507 78.9994483,105.289 C78.999816,105.35929 79,105.429624 79,105.5 C79,127.315248 61.3152476,145 39.5,145 C17.6847524,145 0,127.315248 0,105.5 C0,86.2489739 13.7716652,70.2144925 32.0005517,66.7109998 C32.000184,66.6407098 32,66.5703764 32,66.5 C32,47.8283387 44.9552146,32.1825298 62.367107,28.0611104 C64.7506794,12.178511 78.4531179,0 95,0 C113.225397,0 128,14.7746033 128,33 C128,45.5228232 121.024645,56.4164648 110.747335,62.0075239 Z"
id="Combined-Shape" fill="#D6E4FF"></path>
<path d="M45,146 C24.0131795,146 7,128.98682 7,108 C7,90.4658804 18.8757246,75.7054849 35.0226124,71.3233749 C35.0075783,70.8841017 35,70.4429358 35,70 C35,51.0536056 48.8658128,35.3457454 67.0033881,32.4704697 C67.0011319,32.313916 67,32.1570902 67,32 C67,14.326888 81.326888,0 99,0 C112.460378,0 123.979676,8.31075224 128.706559,20.0809212 C129.46406,20.0272778 130.228844,20 131,20 C141.921518,20 151.565141,25.4713158 157.339446,33.8225233 C161.013714,32.6391579 164.932215,32 169,32 C184.962388,32 198.62603,41.8421035 204.253515,55.7889006 C208.301082,54.6240531 212.577664,54 217,54 C242.405098,54 263,74.5949015 263,100 C263,125.405098 242.405098,146 217,146 L45,146 Z M110.356614,77 L111.02312,77 C110.827566,76.8435339 110.633888,76.6848211 110.442125,76.5239007 C110.414608,76.6829414 110.386102,76.8416433 110.356614,77 Z"
id="Combined-Shape" fill="#F0F5FF"></path>
</g>
<rect id="_clous__spacer" fill="#5B72E5" opacity="0" x="1858" y="217" width="207" height="53"></rect>
<g transform="translate(207.000000, 76.000000)">
<path d="M83.4749025,119.372323 C88.0392129,111.384046 96.6408508,106 106.5,106 C121.1355
