页面烟花特效

2025-01-12 Tech

在一个历史项目上有一个新需求，当客流到达一定整万数的时候，来一个页面特殊效果，于是决定做一个烟花的效果出来。
研究了一下，找到一个项目 https://www.kirilv.com/canvas-confetti/ ，最后的实现效果还不错。

点这里查看演示效果


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>烟花效果</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<style>
#message {
    font-size: 100px;
    font-weight: bold;
    color: #fff;
    position: fixed; /* 全屏覆盖 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 50;

    /* 半透明背景 */
    background-color: rgba(0, 0, 0, 0.7); /* 黑色半透明背景 */
    /* 文字变色效果 */
    animation: color-change 2s infinite; /* 3秒变色循环 */
}

/* 文字颜色变换动画 */
@keyframes color-change {
    0% {
        color: #ff3333; /* 鲜红 */
    }
    25% {
        color: #DC143C; /* 浅红 */
    }
    50% {
        color: #FF1493; /* 桃红 */
    }
    75% {
        color: #8B0000; /* 深红 */
    }
    100% {
        color: #ff3333; /* 回到鲜红 */
    }
}
</style>
<body>

<div id="message" style="display: none;"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>

<script>

function showCelebration(number) {
    const duration = 43000;
    const endTime = Date.now() + duration;
    const colors = ['#bb0000', '#ff00ff', '#00bbff', '#00ff00', '#ffff00', '#ff8800'];

    // 显示文字
    const messageDiv = document.getElementById('message');
    messageDiv.innerHTML = `热烈庆贺客流总数突破<br><br>${number}`;
    $(messageDiv).fadeIn(500);

    function randomInRange(min, max) {
        return Math.random() * (max - min) + min;
    }

    function launchFireworks() {
        (function frame() {
            confetti({
                particleCount: 6,
                angle: 60,
                spread: 55,
                origin: { x: 0 },
                colors: colors
            });
            confetti({
                particleCount: 6,
                angle: 120,
                spread: 55,
                origin: { x: 1 },
                colors: colors
            });

            if (Date.now() < endTime) {
                requestAnimationFrame(frame);
            }
        })();
    }

    function launchCentralExplosions() {
        const interval = setInterval(() => {
            for (let i = 0; i < 3; i++) {
                setTimeout(() => {
                    confetti({
                        spread: 360,
                        ticks: 120,
                        gravity: 0,
                        decay: 0.94,
                        startVelocity: 20,
                        colors: ['#ff4500', '#ff6347', '#ffd700'], // 橙红、番茄红、金色
                        particleCount: 60,
                        scalar: 1.2,
                        origin: {
                            x: randomInRange(0.4, 0.6), // 随机横向位置
                            y: randomInRange(0.4, 0.6), // 随机纵向位置
                        },
                        shapes: ['star', 'circle']
                    });
                }, i * 200);
            }
        }, 2000);

        setTimeout(() => {
            clearInterval(interval);
        }, duration);
    }

    // 启动特效
    launchFireworks();
    launchCentralExplosions();

    // 在25秒后隐藏文字和停止特效
    setTimeout(() => {
        $(messageDiv).fadeOut(500);
    }, duration);
}

showCelebration(60000000);

</script>
</body>
</html>

做完这个以后，后面发现还有一个朋友 Caleb Miller 做的几乎一比一仿真的烟花效果，记录一下。
https://codepen.io/MillerTime/pen/XgpNwb

Notice: 正常情况下，这里会有一个基于utteranc.es的留言系统，如果看不到，可能要想想办法才能看到。