svg+js实现立体雪花下雪飘动动画效果代码-html代码-BFW代码库

svg+js实现立体雪花下雪飘动动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现立体雪花下雪飘动动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
        margin: 0;
        background: linear-gradient(darkblue, #111122);
        overflow: hidden;
        height: 100vh;
}
path:hover {
        
}
</style>

  
  
</head>

<body translate="no">
  
  
      <script>
function snowfetti(el = document.body, opt_properties) {
        if (!el) {
                console.error("Must have element to populate the confetti!");
                return;
        }
        const defaultProperties = {
                addBlur: true,
                angle: 0,
                beginStart: false,
                drop: 400,
                fadeout: true,
                fixedSize: false,
                flakes: 100,
                scale: 1,
                speed: 5000,
                spread: 400,
                spin: true,
                zSpin: true
        };
        const c = {...defaultProperties, ...opt_properties};
        const randInt = (min, max) => {
                return Math.floor(Math.random() * (max - min + 1)) + min;
        };
        const baseEncode = (vall = document.querySelector("#usrInput").value) => {
        let usrVal = vall.replace(/\s\s+/g, ` `);
        let btoa = window.btoa(usrVal);
        let res = encodeURI(vall);
        if (res.indexOf("xmlns=") == -1) res = res.replace(`%3Csvg`, `%3Csvg xmlns=%22http://www.w3.org/2000/svg%22`);
        res = res.replaceAll(`#`, `%23`).replaceAll(`%22`, `'`).replaceAll(`%0A`, ``).replaceAll(`%09`, ``).replaceAll(`%20`, ` `).replace(/\s\s+/g, ` `);
        let baseEncodedSVG = `data:image/svg+xml,${res}`;
        let bgIm = `background-image: url("${baseEncodedSVG}");`;
        return [`data:image/svg+xml;base64,${btoa}`, baseEncodedSVG];
}
        const hh = c.drop;
        const ww = c.spread;
        const randomBlur = () => {
                if (c.addBlur) return randInt(1, 2);
                else return 1;
        };
        const overlayId = `conf${randInt(0, 1000)}etti${randInt(0, 1000)}ver${randInt(0, 1000)}lay`;
        let animatedConfetti = ``;
        // make sure number of flakes is a number
        if (!c.flakes || Number.isNaN(c.flakes * 1)) {
                c.flakes = 100;
        }
        for (let i = 0; i < c.flakes; i++) {
                const conId = `con${randInt(0, 1000)}fet${randInt(0, 1000)}ti${randInt(0, 1000)}`;
                const confettiDur = `${randInt(c.speed / 2, c.speed)}`;
                let confettiSpin = ``;
                let confettiType = ``;
                if (c.spin) {
                        confettiSpin = `<animateTransform attributeName="transform" type="rotate" values="0 0 0; ${(Math.random() < 0.5 ? -1 : 1) * 360} 0 0" dur="${randInt(c..........完整代码请登录后点击上方下载按钮下载查看