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.........完整代码请登录后点击上方下载按钮下载查看