光圈粒子悬浮发散动画效果-html代码-BFW代码库

光圈粒子悬浮发散动画效果

代码语言：html

所属分类：粒子

代码描述：光圈粒子悬浮发散动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
  height: 100vh;
  display: flex;
  overflow: hidden;
  background: black;
}

canvas {
  margin: auto;
  touch-action: none;
  filter: drop-shadow(0px 0px 3px rgba(0, 228, 233, 0.7));
}
</style>

</head>
<body translate="no">

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script>
console.clear();
const particles = [];
const amount = innerWidth < 600 || innerHeight < 600 ? 1000 : 2000;
const durationShrink = 8;
const durationGrow = 8;
const total = durationShrink + durationGrow;
const theme = ['#393e46', '#00adb5', '#393e46', '#00adb5', '#e6eeef'];

// we'll tween the values in this proxy object. "progress" is for the overall progress of the movement around the circle, and "val" is for the individual grow/shrink stuff.
// This technique was kindly provided by Jack from Greensock
const proxy = {
  progress: 1,
  val: 0
};
// for the movement around the circle
const progress = gsap.to(proxy, {
  progress: 0,
  ease: "none",
  duration: total,
  repeat: -1
});
// for the interpolation of each dot's movement (resuse)
const interpolator = gsap.timeline({
  paused: true,
  reverse: true
}).to(proxy, {
  .........完整代码请登录后点击上方下载按钮下载查看