如何快速写一个跨年放烟花的代码（动态效果）

自律的kkk

于 2024-12-31 20:24:10 发布

阅读量1.6k

点赞数 54

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_73355042/article/details/144856764

版权

1. 新建一个txt文档

在这里插入图片描述

2. 将以下代码复制粘贴到你新建的txt文档里面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025跨年烟花秀</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            background-image: url('https://i-blog.csdnimg.cn/blog_migrate/ed8fb82abfae7eb87bd67b552d86990f.gif#pic_center');
            background-size: cover;
            background-position: center;
        }

        #snow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .snowflake {
            position: absolute;
            color: #fff;
            font-size: 20px;
            user-select: none;
            animation: fall linear infinite;
        }

        @keyframes fall {
            to {
                transform: translateY(100vh);
            }
        }

        #fireworks {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .firework {
            position: absolute;
            width: 5px;
            height: 5px;
            background: #ff0;
            border-radius: 50%;
            animation: explode 1.5s ease-out forwards;
        }

        @keyframes explode {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(10);
                opacity: 0;
            }
        }

        #greeting {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3em;
            text-align: center;
            color: #fff;
            text-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #ff0;
            white-space: nowrap;
            overflow: hidden;
            border-right: 2px solid #fff;
            width: 0;
            animation: typing 4s steps(12, end) forwards, blink-caret 0.75s step-end infinite;
        }

        @keyframes typing {
            to {
                width: 12em; /* 根据文字长度调整 */
            }
        }

        @keyframes blink-caret {
            from, to {
                border-color: transparent;
            }
            50% {
                border-color: #fff;
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div id="snow"></div>
    <div id="fireworks"></div>
    <div id="greeting"></div>

    <script>
        // 雪花效果
        const snowContainer = document.getElementById('snow');
        const snowflakeCount = 50;

        for (let i = 0; i < snowflakeCount; i++) {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.innerHTML = '❄';
            snowflake.style.left = `${Math.random() * 100}vw`;
            snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`;
            snowflake.style.animationDelay = `${Math.random() * 2}s`;
            snowContainer.appendChild(snowflake);
        }

        // 烟花效果
        const fireworksContainer = document.getElementById('fireworks');

        function createFirework() {
            const firework = document.createElement('div');
            firework.classList.add('firework');
            firework.style.left = `${Math.random() * 100}vw`;
            firework.style.top = `${Math.random() * 100}vh`;
            firework.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
            fireworksContainer.appendChild(firework);

            // 创建烟花粒子
            const particleCount = 50; // 增加粒子数量
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('firework');
                particle.style.left = firework.style.left;
                particle.style.top = firework.style.top;
                particle.style.backgroundColor = firework.style.backgroundColor;
                particle.style.animationDuration = `${Math.random() * 1 + 0.5}s`;
                particle.style.transform = `translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px)`;
                fireworksContainer.appendChild(particle);

                setTimeout(() => {
                    particle.remove();
                }, 1500);
            }

            setTimeout(() => {
                firework.remove();
            }, 1500);
        }

        setInterval(createFirework, 100); // 提高烟花生成频率

        // 文字逐字打印效果
        const greeting = document.getElementById('greeting');
        const text = "你好，2025！新年快乐";
        let index = 0;

        function typeWriter() {
            if (index < text.length) {
                greeting.innerHTML += text.charAt(index);
                index++;
                setTimeout(typeWriter, 200); // 控制打印速度
            } else {
                setTimeout(() => {
                    greeting.style.animation = 'fadeOut 1s forwards'; // 文字消失效果
                }, 2000); // 打印完成后等待2秒再消失
            }
        }

        typeWriter();
    </script>
</body>
</html>