gsap实现彩色粒子冒泡动画效果代码-html代码-BFW代码库

gsap实现彩色粒子冒泡动画效果代码

代码语言：html

所属分类：粒子

代码描述：gsap实现彩色粒子冒泡动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body{
  background-color:#000;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}



.mainSVG{
  width:80%;
  height: 80%;
  overflow: visible;
}
</style>


</head>

<body>
  <svg class="mainSVG" 
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600" >
<defs>
<filter id="glow" y="-50%" height="180%" color-interpolation-filters="sRGB" >
    <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>

</filter>   

</defs>
  
<circle   class="bubble" cx="0" cy="0" r="0"/>  
<path class="face"fill="#000" d="M250.1,477.1c0,0,17.9-37.5,28.3-47.5c8.3-8,10.9-12.4,40.4,0c29.5,12.4,38.1,8.5,45.1,3.1
	c7-5.4,8.2-19.8,6.9-23.8c-1.3-4.1,3.4-9.3,6.3-9c2.9,0.3,7.7-3.1,8-6.6s0.4-3.2-0.9-8.6c2.8-1,16.2-3.4,9.3-15
	c-6.8-11.7,3.8-15.1,3.8-15.1s19.2-0.2,19.4-11.7c0.2-11.5-17.1-33.2-17.9-40.6c-0.8-7.4,3.5-18.1,3.5-18.1s15.1-38.8-3.5-75.7
	c-18.6-36.9-69.1-52-88.2-53.6c-40-3.3-86.6,12.4-103.7,65.3s-4.2,92.3-4.7,108.8c-1.6,56-45.6,91.3-45.6,91.3L250.1,477.1z"/>

</svg>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin3.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Physics2DPlugin3.min.js"></script>
      <script>
     
var select = function(s) {
      return document.querySelector(s);
    }, selectAll = function(s) {
      return document.querySelectorAll(s);
    }, container = select('.container'),
		mainSVG = select('.mainSVG'),
		bubble = select('.bubble')


var mainTimeline = gsap.timeline({paused:true});


var particleColorArray = ['#CC230C', '#E0550D', '#C8433E', '#FA9417', '#F7A958', '#F4BEA2', '#D57A84'];

var numBubbles = 100;

//behind
for(var i = 0; i < numBubbles/2; i++){

  var colorId = Math.floor(Math.random()*particleColorArray.length);
  
  var p = bubble.cloneNode(true)
  mainSVG.insertBefore(p, mainSVG.firstChild);
  var startRadius = gsap.utils.random(2, 32); 
  TweenMax.set(p, {
    attr:{
      cx:gsap.utils.random(200, 300),
      cy:gsap.utils.random(400, 400),
      r:0
    },
    filter:'url(#glow)',
    fill:particleColorArray[colorId]
  })
  
  p.startRadius = startRadius;
  
var dur = gsap.utils.random(8, 10);
  var angle = gsap.utils.random(0, 90);
  var tl = gsap.timeline({repeat:3});.........完整代码请登录后点击上方下载按钮下载查看