TweenMax+svg实现一个泡泡大炮发射泡泡动画效果代码-html代码-BFW代码库

TweenMax+svg实现一个泡泡大炮发射泡泡动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现一个泡泡大炮发射泡泡动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        #world {
         width: 95%;
         height: 100%;
        }
        
        body {
         background-color: #E0F2F1;
         overflow: hidden;
         text-align: center;
        }
        body,
        html {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
        }
        svg {
            display: inline-block;
        }
        #button {
          cursor: pointer;
        }
    </style>


</head>

<body>
    <svg version="1.1" id="world" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="776px" height="353.5px" viewBox="0 0 776 353.5" enable-background="new 0 0 776 353.5" xml:space="preserve">
<g id="bubbles">
        <circle id="svg_1" fill="#F44336" cx="431.629" cy="165.53" r="5"/>
        <circle id="svg_2" fill="#E91E63" cx="434.182" cy="168.312" r="5"/>
        <circle id="svg_3" fill="#9C27B0" cx="429.568" cy="172.093" r="5"/>
        <circle id="svg_4" fill="#673AB7" cx="426.574" cy="166.301" r="4"/>
        <circle id="svg_5" fill="#3F51B5" cx="432.087" cy="169.482" r="5"/>
        <circle id="svg_6" fill="#2196F3" cx="432.23" cy="166.226" r="5"/>
        <circle id="svg_8" fill="#009688" cx="433.479" cy="172.289" r="4"/>
</g>
<g>
        <polygon fill="#E2DBD9" points="84.008,277.013 439.008,257.013 620.008,300.013 265.008,318.013  "/>
        <polygon fill="#9E9693" points="264.508,310.035 264.508,321.013 82.258,288.628 83.633,277.013   "/>
        <polygon fill=&qu.........完整代码请登录后点击上方下载按钮下载查看