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.........完整代码请登录后点击上方下载按钮下载查看