TweenMax+svg实现飞艇天空云中飞行动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现飞艇天空云中飞行动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

</head>

<body>
    <div class="wrapper"><svg width="725px" height="530px" viewBox="0 0 725 530" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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.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="M1174,245.488176 L1174,246 L826,246 L826,245.876779 C807.521408,244.352326 793,228.871991 793,210 C793,190.117749 809.117749,174 829,174 C834.771735,174 840.22623,175.35827 845.061277,177.772604 C851.764904,165.965309 864.452253,158 879,158 C882.035003,158 884.989034,158.34668 887.824654,159.002601 C892.318431,133.430725 914.640071,114 941.5,114 C945.227802,114 948.868188,114.37427 952.385632,115.087283 C961.83188,98.886971 979.394546,88 999.5,88 C1019.48414,88 1036.95608,98.7559818 1046.44248,114.794603 C1048.87941,114.273994 1051.40771,114 1054,114 C1065.46672,114 1075.68129,119.36107 1082.27397,127.713464 C1090.05457,123.43425 1098.99301,121 1108.5,121 C1124.88693,121 1139.58467,128.232267 1149.57544,139.67901 C1154.90308,137.94015 1160.59175,137 1166.5,137 C1196.59952,137 1221,161.400481 1221,191.5 C1221,219.055026 1200.55058,241.833834 1174,245.488176 Z" fill="#F0F5FF"></path><path d="M1268,41 C1268,25.536027 1280.53603,13 1296,13 C1298.98442,13 1301.85979,13.4669157 1304.55704,14.3316827 C1309.3494,5.77989046 1318.49972,0 1329,0 C1339.07522,0 1347.90756,5.3214103 1352.83973,13.3069535 C1354.19713,13.1047646 1355.58633,13 1357,13 C1372.46397,13 1385,25.536027 1385,41 L1268,41 Z" fill="#F0F5FF"></path><g transform="translate(1595.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></g></g></g></g><g id="zeppelin" transform="translate(155.000000, 195.000000)"><rect fill="#663014" x="166" y="121" width="58" height="28" rx="8"></rect><circle fill="#FFFF46" cx="175" cy="144" r="1"></circle><circle fill="#FFFF46" cx="215" cy="144" r="1"></circle><circle fill="#FFFF46" cx="179" cy="144" r="1"></circle><circle fill="#FFFF46" cx="211" cy="144" r="1"></circle><circle fill="#FFFF46" cx="207" cy="144" r="1"></circle><circle fill="#FFFF46" cx="203" cy="144" r="1"></circle><circle fill="#FFFF46" cx="199" cy="144" r="1"></circle><circle fill="#FFFF46" cx="195" cy="144" r="1"></circle><circle fill="#FFFF46" cx="191" cy="144" r="1"></circle><circle fill="#FFFF46" cx="187" cy="144" r="1"></circle><circle fill="#FFFF46" cx="183" cy=&.........完整代码请登录后点击上方下载按钮下载查看