gsap+Physics2DPlugin3实现2023夜空中点击燃放烟花动画效果代码-html代码-BFW代码库

gsap+Physics2DPlugin3实现2023夜空中点击燃放烟花动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+Physics2DPlugin3实现2023夜空中点击燃放烟花动画效果代码

代码标签： gsap Physics2DPlugin3 2023 夜空点击燃放烟花动画

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
* {
  box-sizing: border-box;
}

:root {
  --panel: hsl(0 0% 0% / 0.5);
  --size: 50vmin;
  --size: clamp(300px, 40vw, 100%);
  --blur: 100px;
  --blur: calc(40vw * 0.1);
  --aspect: 16 / 9;
}

h1 {
  margin: 0;
  font-family: sans-serif;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  position: fixed;
  color: hsl(0 0% 98%);
  font-size: 3rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.8;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: hsl(0 0% 0%);
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.panel {
  display: grid;
  place-items: center;
  width: var(--size);
  aspect-ratio: var(--aspect);
  -webkit-backdrop-filter: grayscale(1) brightness(10) blur(var(--blur));
          backdrop-filter: grayscale(1) brightness(10) blur(var(--blur));
  -webkit-mask: url(//repo.bfw.wiki/bfwrepo/images/2023.png);
          mask: url(//repo.bfw.wiki/bfwrepo/images/2023.png);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  mask-mode: alpha;
  bottom: 1vh;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>



</head>

<body >
  <canvas id=back></canvas>
<div class="panel"></div>
<canvas id=front></canvas>
<h1>tap</h1>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Physics2DPlugin3.min.js"></script>
      <script >
gsap.registerPlugin(Physics2DPlugin);

const BACK_CANVAS = document.querySelector("#back");
const BACK_CONTEXT = BACK_CANVAS.getContext("2d");
const FRONT_CANVAS = document.querySelector("#front");
const FRONT_CONTEXT = FRONT_CANVAS.getContext("2d");

BACK_CANVAS.width = FRONT_CANVAS.width = window.innerWidth;
BACK_CANVAS.height = FRONT_CANVAS.height = window.innerHeight;

const CONFIG = {
  size: [4, 12],
  seed: 6,
  dest: [0.1, 0.75],
  window: [0.35, 0.65],
  alpha: [1, 0],
  duration: [1, 6],
  saturation: [30, 100],
  lightness: [30, 90],
  velocity: [10, 250],
  gravity: [150, 600] };


const drawFirework = (work, context) => {
  context.fillStyle = `hsl(40 80% 80%)`;
  context.fillRect(work.seed.x - work.seed.size * 0.5, work.seed.y - work.seed.size * 0.5, work.seed.size, work.seed.size);
  work.sparkles.forEach(s => {
    context.fillStyle = `hsl(${s.hue} ${s.saturation}% ${s.lightness}% / ${s.alpha})`;
    context.beginPath();
    context.arc(s.x - s.size * 0.5, s.y - s.size * 0.5, s.size * 0.5, 0, 2 * Math.PI, false);
    context.fill();
  });
};

const draw = () => {
  BACK_CONTEXT.clearRect(0, 0, BACK_CANVAS.width, BACK_CANVAS.height);
  FRONT_CONTEXT.clearRect(0, 0, FRONT_CANVAS.width, FRONT_CANVAS.height);
  frontFireworks.forEach(work => {
    drawFirework(work, FRONT_CONTEXT);
  });
  backFireworks.forEach(work => {
    drawFirework(work, BACK_CONTEXT);
  });
};

let frontFirewo.........完整代码请登录后点击上方下载按钮下载查看