svg+js实现烟花燃放动画效果代码-html代码-BFW代码库

svg+js实现烟花燃放动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现烟花燃放动画效果代码，可设置自动或手动燃放动画效果。

下面为部分代码预览，完整代码请点击下载或在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.1.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 = e.clientX
  m.y = 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.ap.........完整代码请登录后点击上方下载按钮下载查看