TweenMax+svg实现彩色气泡上升形成图形效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现彩色气泡上升形成图形效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body { background-color: #FFF; overflow: hidden; text-align:center;  display: flex;  align-items: center;  justify-content: center; }body,html { height: 100%; width: 100%; margin: 0; padding: 0;}svg { width: 100%; height: 100%; visibility: hidden; overflow: visible; }.smashingDots circle { mix-blend-mode: multiply;}
    </style>
</head>

<body><svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"><defs></defs><title>Desiging Delightful Animations for the Web</title><g class="smashingDots"><circle cx="353.49" cy="194.3" r="15.66" fill="#f35724"/><circle cx="355.46" cy="487.11" r="23.27" fill="#02a2b8"/><circle cx="375.24" cy="494.85" r="23.27" fill="#02a2b8"/><circle cx="436.98" cy="491.28" r="23.27" fill="#02a2b8"/><circle cx="587.83" cy="424.43" r="23.27" fill="#2a3797"/><circle cx="222.98" cy="279.74" r="23.27" fill="#bc0271"/><circle cx="402.91" cy="456.97" r="23.27" fill="#016db8"/><circle cx="418.48" cy="428.65" r="23.27" fill="#2a3797"/><circle cx="590.84" cy="390.06" r="23.27" fill="#612d92"/><circle cx="241.88" cy="362.9" r="23.27" fill="#612d92"/><circle cx="470.96" cy="356.6" r="23.27" fill="#283897"/><circle cx="225.49" cy="186.79" r="16.79" fill="#f35724"/><circle cx="367.34" cy="155.1" r="16.79" fill="#f35724"/><circle cx="603.24" cy="239.67" r="23.27" fill="#ee1c27"/><circle cx="575.48" cy="217.71" r="23.27" fill="#ee1c27"/><circle cx="488.78" cy="398.94" r="23.27" fill="#612d92"/><circle cx="368.99" cy="289.78" r="23.27" fill="#bc0271"/><circle cx="496.39" cy="110.63" r="23.27" fill="#fef200"/><circle cx="547.1" cy="223.53" r="15.66" fill="#ee1c27"/><circle cx="404.97" cy="182.44" r="15.66" fill="#f35724"/><circle cx="329.3" cy="182.25" r="15.56" fill="#f35724"/><circle cx="232.93" cy="403.71" r="15.66" fill="#2a3797"/><circle cx="449.36" cy="348.13" r="15.66" fill="#612d92"/><circle cx="330.53" cy="405.01" r="15.66" fill="#612d92"/><circle cx="337.58" cy="277.9" r="15.66" fill="#bc0271"/><circle cx="313.7" cy="214.49" r="15.66" fill="#ee1c27"/><circle cx="413.33" cy="153.66" r="15.66" fill="#f35724"/><circle cx="404.97" cy="98.03" r="15.66" fill="#fef200"/><circle cx="418.79" cy="124.71" r="15.66" fill="#fdad18"/><circle cx="562.76" cy="289.83" r="15.66" fill="#bc0271"/><circle cx="463.82" cy="164.1" r="15.66" fill="#f35724"/><circle cx="376.6" cy="263.09" r="15.66" fill="#bc0271"/><circle cx="355.85" cy="269.42" r="15.66" fill="#ee1c27"/><circle cx="270.38" cy="451.51" r="15.66" fill="#016db8"/><circle cx="590.05" cy="460.84" r="15.66" fill="#2e3192"/><circle cx="582.6" cy="274.9" r="15.66" fill="#bc0271"/><circle cx="592.27" cy="246.15" r="15.66" fill="#bc0271"/><circle cx="562.88" cy="191.69" r="15.66" fill="#f35724"/><circle cx="607.93" cy="268.95" r="15.66" fill="#bc0271"/><circle cx="390.9" cy="422.69" r="15.66" fill="#612d92"/><circle cx="345.05" cy="428.65" r="15.66" fill="#2a3797"/><circle cx="223.26" cy="249.21" r="15.66" fill="#bc0271"/><circle cx="213.23" cy="164.38" r="15.66" fill="#fef200"/><circle cx="379.39" cy="95.51" r="15.66" fill="#00a666"/><circle cx="318.42" cy="432.45" r="15.66" fill="#2a3797"/><circle cx="607.93" cy="334.24" r="15.66" fill="#612d92"/><circle cx="422.31" cy="324.24" r="15.66" fill="#612d92"/><circle cx="381.5" cy="181.5" r="21.41" fill="#f58021"/><circle cx="456.65" cy="100.99" r="36.19" fill="#a6cf4d"/><circle cx="547.1" cy="452.48" r="36.19" fill="#2a3797"/><circle cx="610.78" cy="374.59" r="36.19" fill="#612d92"/><circle cx="487.38" cy="469.6" r="36.19" fill="#016db8"/><circle cx="590.05" cy="316.69" r="36.19" fill="#ee1c27"/><circle cx="335.83" cy="235.03" r="37.23" fill="#ee1c27"/><circle cx="190.57" cy="208.92" r="37.23" fill="#f58021"/><circle cx="199.72" cy="249.21" r="25.21" fill="#ee1c27"/><circle cx="277.42" cy="511.09" r="37.23" fill="#02a2b8"/><circle cx="318.42" cy="125.87" r="37.23" fill="#fdad18"/><circle cx="547.1" cy="136.16" r="36.5" fill="#fef200"/><circle cx="243.31" cy="427.07" r="36.19" fill="#2a3797"/><circle cx="401.35" cy="522.28" r="28.5" fill="#02a2b8"/><circle cx="344.19" cy="498.82" r="36.19" fill="#84d0e6"/><circle cx="260.7" cy="479.12" r="27.98" fill="#84d0e6"/><circle cx="259.18" cy="146.83" r="36.19" fill="#fef200"/><circle cx="294.48" cy="151.35" r="23.94" fill="#f35724"/><circle cx="543.73" cy="204.04" r="16.67" fill="#f35724"/><circle cx="473.32" cy="184.15" r="16.67" fill="#f35724"/><circle cx="349.69" cy="164.38" r="16.67" fill="#f35724"/><circle cx="450.98" cy="414.99" r="25.07" fill="#2a3797"/><circle cx="562.76" cy="250.84" r="25.07" fill="#bc0271"/><circle cx="245.31" cy="384.97" r="25.07" fill="#612d92"/><circle cx="213.23" cy="468.38" r="25.07" fill="#02a2b8"/><circle cx="443.22" cy="448.83" r="25.07" fill="#016db8"/><circle cx="356.94" cy="117.63" r="25.07" fill="#fef200"/><circle cx="416.28" cy="64.8" r="25.07" fill="#a6cf4d"/><circle cx="544.78" cy="172.66" r="25.07" fill="#f35724"/><circle cx="402.91" cy="293.55" r="25.07" fill="#ee1c27"/><circle cx="371.11" cy="432.45" r="25.07" fill="#016db8"/><circle cx="429.85" cy="160.88" r="7.54" fill="#f35724"/><circle cx="442.83" cy="133.9" r="7.54" fill="#fdae15"/><circle cx="446.6" cy="194.56" r="7.54" fill="#f35724"/><circle cx="225.49" cy="210.9" r="7.54" fill="#ee1c27"/><circle cx="375.24" cy="142.84" r="7.54" fill="#fdae15"/><circle cx="249.42" cy="179.18" r="7.54" fill="#f35724"/><circle cx="510.83" cy="135.3" r="7.54" fill="#fdae15"/><circle cx="433.32" cy="185.67" r="7.54" fill="#f35724"/><circle cx="438.45" cy="174.21" r="7.54" fill="#f35724"/><circle cx="420.05" cy="190.9" r="7.54" fill="#f35724"/><circle cx="386.55" cy="153.66" r="7.54" fill="#f35724"/><circle cx="477.09" cy="160.09" r="7.54" fill="#f35724"/><circle cx="251.36" cy="334.15" r="7.54" fill="#612d92"/><circle cx="527.05" cy="498.82" r="7.54" fill="#02a2b8"/><circle cx="396.18" cy="480.06" r="7.54" fill="#02a2b8"/><circle cx="482.19" cy="430.95" r="7.54" fill="#016db8"/><circle cx="190.57" cy="360.02" r="7.54" fill="#612d92"/><circle cx="217.95" cy="138.31" r="7.54" fill="#a6cf4d"/><circle cx="173.82" cy="260.95" r="7.54" fill="#bc0271"/><circle cx="427.39" cy="475.35" r="7.54" fill="#2e3192"/><circle cx="401.35" cy="487.78" r="7.54" fill="#016db8"/><circle cx="291.5" cy="472.52" r="7.54" fill="#02a2b8"/><circle cx="301.61" cy="479.69" r="7.54" fill="#84d0e6"/><circle cx="312.09" cy="486.04" r="9.76" fill="#016db8"/><circle cx="416.61" cy="479.12" r="7.54" fill="#2e3192"/><circle cx="358.34" cy="456.59" r="7.54" fill="#2e3192"/><circle cx="288.68" cy="464.13" r="7.54" fill="#2e3192"/><circle cx="302.76" cy="472.52" r="7.54" fill="#2e3192"/><circle cx="316.28" cy="474.71" r="7.54" fill="#2e3192"/><circle cx="373.06" cy="469.6" r="7.54" fill="#2e3192"/><circle cx="385.46" cy="472.52" r="7.54" fill="#2e3192"/><circle cx="436.67" cy="451.31" r="7.54" fill="#2e3192"/><circle cx="596.26" cy="342.03" r="7.54" fill="#612d92"/><circle cx="607.31" cy="303.79" r="7.54" fill="#bc0271"/><circle cx="371.11" cy="206.95" r="7.54" fill="#ee1c27"/><circle cx="502.13" cy="131.53" r="5.65" fill="#fdae15"/><circle cx="328.42" cy="448.11" r="5.65" fill="#2e3192"/><circle cx="308.42" cy="438.69" r="5.65" fill="#016db8"/><circle cx="468.63" cy="456.97" r="5.65" fill="#2e3192"/><circle cx="243.56" cy="289.78" r="5.65" fill="#bc0271"/><circle cx="441.12" cy="438.69" r="5.65" fill="#016db8"/><circle cx="478.82" cy="422.2" r="5.65" fill="#2a3797"/><circle cx="426.91" cy="407.99" r="5.65" fill="#612d92"/><circle cx="498.58" cy="418.37" r="5.65" fill="#2a3797"/><circle cx="551.27" cy="275.91" r="7.54" fill="#ee1c27"/><circle cx="455.82" cy="171.01" r="7.54" fill="#f35724"/><circle cx="470.2" cy="177.98" r="7.54" fill="#f35724"/><circle cx="330.74" cy="169.32" r="7.54" fill="#f35724"/><circle cx="392.26" cy="140.37" r="7.54" fill="#fdae15"/><circle cx="398.44" cy="124.71" r="7.54" fill="#fef200"/><circle cx="321.85" cy="199.09" r="7.54" fill="#ee1c27"/><circle cx="399.4" cy="113.11" r="7.54" fill="#fef200"/><circle cx="418.79" cy="105.57" r="7.54" fill="#00a666"/><circle cx="312.87" cy="191.55" r="7.54" fill="#f35724"/><circle cx="412.51" cy="279.34" r="7.54" fill="#bc0271"/><circle cx="372.02" cy="247.43" r="7.54" fill="#f35724"/><circle cx="501.16" cy="433.93" r="7.54" fill="#016db8"/><circle cx="603.8" cy="409.1" r="7.54" fill="#2a3797"/><circle cx="571.08" cy="401.56" r="7.54" fill="#2a3797"/><circle cx="484.92" cy="179.48" r="7.54" fill="#f35724"/><circle cx="344.19" cy="293.55" r="7.54" fill="#ee1c27"/><circle cx="378.65" cy="311.94" r="7.54" fill="#2e3192"/><circle cx="425.91" cy="279.34" r="7.54" fill="#bc0271"/><circle cx="450.17" cy="288.54" r="7.54" fill="#bc0271"/><circle cx="465.78" cy="201.38" r="7.54" fill="#ee1c27"/><circle cx="446.61" cy="174.21" r="7.54" fill="#f58021"/><circle cx="434.45" cy="148.44" r="7.54" fill="#fdae15"/><circle cx="490.2" cy="165.4" r="7.54" fill="#f35724"/><circle cx="447.42" cy="387.03" r="7.54" fill="#612d92"/><circle cx="434.93" cy="312.48" r="7.54" fill="#2e3192"/><circle cx="437.96" cy="331.78" r="7.54" fill="#612d92"/><circle cx="510.17" cy="382.13" r="7.54" fill="#612d92"/><circle cx="304.54" cy="201.75" r="3.77" fill="#f35724"/><circle cx="306.16" cy="196.45" r="3.77" fill="#f35724"/><circle cx="281.19" cy="114.92" r="3.77" fill="#00a666"/><circle cx="339.67" cy="93.62" r="3.77" fill="#00a666"/><circle cx="386.55" cy="114.92" r="3.77" fill="#fef200"/><circle cx="392.26" cy="118.69" r="3.77" fill="#fef200"/><circle cx="440.86" cy="146.12" r="3.77" fill="#fdae15"/><circle cx="491.45" cy="172.66" r="3.77" fill="#f35724"/><circle cx="333.01" cy="442.46" r="3.77" fill="#016db8"/><circle cx="424.69" cy="340.04" r="3.77" fill="#612d92"/><circle cx="443.22" cy="363.67" r="3.77" fill="#bc0271"/><circle cx="429.13" cy="343.13" r="3.77" fill="#612d92"/><circle cx="538.55" cy="239.19" r="3.77" fill="#f35724"/><circle cx="440.75" cy="293.55" r="3.77" fill="#bc0271&qu.........完整代码请登录后点击上方下载按钮下载查看