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="#C9C0BD" points="263.924,309.998 620.508,300.513 620.508,312.117 264.133,321.513 	"/>
</g>
<g id="cannon">
	<polygon fill="#6DA3AF" points="452.348,185.502 446.875,176.109 335.152,168.444 336.163,185.328 	"/>
	<polygon fill="#9ADFEF" points="338.478,224.031 449.916,207.941 453.422,198.64 337.62,209.692 	"/>
	<polygon fill="#4292A8" points="330.096,168.097 325.009,167.747 311.499,184.669 311.532,185.29 323.173,185.307 336.163,185.328 
		335.152,168.444 	"/>
	<polygon fill="#4FB7DB" points="323.173,185.307 311.532,185.29 312.945,212.045 324.705,210.922 337.62,209.692 336.163,185.328 	
		"/>
	<polygon fill="#65D2EF" points="324.705,210.922 312.945,212.045 312.956,212.247 328.104,225.529 335.051,224.527 
		338.478,224.031 337.62,209.692 	"/>
	<path fill="#7CC5D8" d="M452.775,186.24l-0.429-0.733l-116.185-0.177l1.458,24.362l115.802-11.052l0.365-0.973L452.775,186.24z
		 M345.774,199.455l-1.516,3.021l-1.475-3..........完整代码请登录后点击上方下载按钮下载查看