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