gsap+svg实现炫酷烟花绽放动画效果代码-html代码-BFW代码库

gsap+svg实现炫酷烟花绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现炫酷烟花绽放动画效果代码，可切换手动u自动模式。

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@600&display=swap');html,body,svg,.bg{width:100%;height:100%;overflow:hidden;position:absolute;top:0;font-family:'Roboto',sans-serif;font-size:19px}body{background:#000}.bg{background:linear-gradient(165deg,black 30%,darkblue 200%)}
    </style>
</head>

<body>
    <div class="bg"></div><svg stroke="#fff" stroke-linecap="round"><g class="stage"><rect width="100%" height="100%" fill="rgba(0,0,0,0)" stroke="none" /></g><g class="toggle" style="cursor:pointer;user-select:none"><path d="M100,20 118,20" stroke-width="25" /><path class="knob" d="M100,20 100,20" stroke-width="20" stroke="#000" /><text class="txt1" fill="#fff" x="11" y="26">Manual</text><text class="txt2" fill="#fff" x="144" y="26" opacity="0.3">Auto</text></g></svg>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.4.js"></script>
    <script>
        let auto = false
const m = {x:0, y:0},
      stage = document.querySelector('.stage'),
      toggle = document.querySelector('.toggle')

window.onpointerdown = window.onpointermove = (e)=>{
  m.x = Math.round(e.clientX)
  m.y = Math.round(e.clientY)
}

stage.onpointerup = (e)=>{
  gsap.killTweensOf(autoPlay)
  gsap.killTweensOf(fire)
  auto = true
  toggleAuto()
  fire(m)
}

function fire(m){
  
  const firework = document.createElementNS('http://www.w3.org/2000/svg', 'g'),
        trail = document.createElementNS('http://www.w3.org/2000/svg', 'g'),
        ring = document.createElementNS('http://www.w3.org/2000/svg', 'g'),
        hsl = 'hsl('+gsap.utils.random(0,360,1)+',100%,50%)'
  
  stage.appendChild(firework)
  firework.appendChild(trail)
  firework.appendChild(ring)
  
  for .........完整代码请登录后点击上方下载按钮下载查看