css+js实现按钮点击碎纸屑喷射动画效果代码-html代码-BFW代码库

css+js实现按钮点击碎纸屑喷射动画效果代码

代码语言：html

所属分类：动画

代码描述：css+js实现按钮点击碎纸屑喷射动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{
                background:#f2f2f4;
        }
        button{
                font-family:'Roboto', sans-serif;
                transform:translate(0%,-50%);
                font-size:1.2em;
                padding:20px;
                background:#4285f4;
                color:#fff;
                border:none;
                border-radius:6px;
                cursor:pointer;
                margin-top:20px;
                min-width:200px;
                display:inline-block;
        }
        button:active{
                transform: translate(0%, -50%) scale(1.01);
        }
        .code{
                top:20%;
                left:50%;
        }
        .flower{
                top:30%;
                left:50%;
        }
        .xo{
                top:40%;
                left:50%;
        }
        .btns{
                position: absolute;
                top:0%;
                left:50%;
                transform:translate(-50%);
                margin-top:100px;
        /*      border:2px solid red; */
        }
        .overThere{
                width:!important 100px;
                min-width: 100px;
        }
        .overThere2{
                height:20px;
                width:20px;
                background:red;
                display:inline-block;
                border-radius:50%;
                transform:translate(100%, -150%);
        }
    </style>


</head>

<body>
    <div class="btns">
        <button class="default">DEFAULT</button>
        <br/>
        <button class="code">👨‍💻 CODE 👨‍💻</button>
        <br/>
        <button class="flower">🌼 FLOWER 🌼</button>
        <br/>
        <button class="square">⬜ SQUARE ⬜</button>
        <br/>
        <button class="xo">❌ Xs and Os ❌</button>
        <br/>
        <button class="music">🎶 MUSIC 🎵</button>
        <br/>
        <button class="overThere">Over there ➡️</button>
        <span class="overThere2"></span>
    </div>


    <script>
       function confetti(el, params) {
        if (!el){
                console.error('Must have element to populate the confetti!');
                return;
        }
        const defaultProperties = {
                colors: 'random', 
                delay: 100,
                drop: window.innerHeight,
                fadeout: true,
                flakes: 100,
                speed: 6000,
                spin: true,
                spread: 400,
                type: 'default'
        };
        
        // properties passed in from user onto the defaults
        const c = Object.assign(defaultProperties, params);

        const randInt = (min, max) => {
                return Math.floor(Math.random() * (max - min + 1)) + min;
        };
        
        let hh = c.drop;        
        let ww = c.spread;

        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++) {
                let conId = `con${randInt(0, 1000)}fet${randInt(0, 1000)}ti${randInt(0, 1000)}`;
                let confettiDur = `${randInt(c.speed / 2, c.speed)}`;
                let confettiSpin = ``;
                let confettiType = ``;
                if (c.spin) {
                        confettiSpin = `<animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 0 0"
                          to="${(Math.random() < 0.5 ? -1 : 1) * 360} 0 0"
                          dur="${randInt(c.speed/6, c.speed/2)}ms"
                                                                                                        begin="-${randInt(1, 10) / 10}s"
                          repeatCount="indefinite"/>`;
                }
                // are we using an array of colors or random ones?
                let confettiColor = ``;
                if (c.colors == 'random' || !Array.isArray(c.colors)) {
                        confettiColor = `rgb(${randInt(0, 255)}, ${randInt(0, 255)}, ${randInt(0, 255)})`;
                } else {
                        confettiColor = c.colors[randInt(0, c.colors.length-1)];
                }
                
                // what type of confetti is it?
                switch (c.type) {
                        case 'XO':
                        case 'xo':
                                if (randInt(0, 1) == 1) {
                                // O shape
                                confettiType = `<circle id="${conId}" stroke="${confettiColor}" stroke-width="${randInt(1,      3)}" fill="none" cx="0" cy="0" r="${randInt(4, 7)}" filter="url(#blur${randInt(1, 2)})">
                ${confettiSpin}
                </circle>`;
                        } else {
                                // X shape
                                confettiType = `<path id="${conId}" .........完整代码请登录后点击上方下载按钮下载查看