js五彩纸屑特效

使用canvas-confetti插件版本 1.9.3 创建一个五彩纸屑的特效,具体代码如下:

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script><script>// 页面加载完成即开始执行

    window.onload = function() {

        var end = Date.now() + (5 * 1000); // 持续时间5秒

        (function frame() {

            // 发射左侧的纸屑

            confetti({

                particleCount: 4,

                angle: 60,

                spread: 80,

                origin: { x: 0 },

                zIndex: 100,

        colors: ["#26ccff","#a25afd","#ff5e7e","#88ff5a","#fcff42","#ffa62d","#ff36ff"],

            });

            // 发射右侧的纸屑

            confetti({

                particleCount: 4,

                angle: 120,

                spread: 80,

                origin: { x: 1 },

                colors: ["#87CEFA","#FFA500"],

        });

            if (Date.now() < end) {

                requestAnimationFrame(frame); // 循环调用frame函数

            }

        }());

    };</script>

· END ·