新年快乐特效

已于 2025-06-27 13:27:11 修改
阅读量349 收藏 7
点赞数 3
CC 4.0 BY-SA版权
文章标签： css css3 html
于 2025-06-06 17:27:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148479135

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年快乐</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #000;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .container {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        
        .new-year-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ff0;
            font-size: 5em;
            font-weight: bold;
            text-shadow: 0 0 10px #f00, 0 0 20px #f00, 0 0 30px #f00;
            z-index: 10;
            animation: glow 1s ease-in-out infinite alternate;
        }
        
        @keyframes glow {
            from {
                text-shadow: 0 0 10px #f00, 0 0 20px #f00, 0 0 30px #f00;
            }
            to {
                text-shadow: 0 0 20px #f00, 0 0 30px #ff0, 0 0 40px #ff0;
            }
        }
        
        .firework {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);
            animation: explode 1s ease-out forwards;
            opacity: 0;
        }
        
        @keyframes explode {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            100% {
                transform: scale(20);
                opacity: 0;
            }
        }
        
        .lantern {
            position: absolute;
            width: 60px;
            height: 80px;
            background: #f00;
            border-radius: 50% 50% 10px 10px;
            box-shadow: 0 0 20px #f00;
            animation: swing 3s infinite ease-in-out;
        }
        
        .lantern:before {
            content: "";
            position: absolute;
            width: 10px;
            height: 15px;
            background: #ff0;
            top: -15px;
            left: 25px;
            border-radius: 5px 5px 0 0;
        }
        
        .lantern:after {
            content: "福";
            position: absolute;
            color: #ff0;
            font-size: 30px;
            font-weight: bold;
            top: 25px;
            left: 15px;
        }
        
        @keyframes swing {
            0%, 100% {
                transform: rotate(-5deg);
            }
            50% {
                transform: rotate(5deg);
            }
        }
        
        .snowflake {
            position: absolute;
            color: #fff;
            font-size: 20px;
            animation: fall linear infinite;
        }
        
        @keyframes fall {
            to {
                transform: translateY(100vh);
            }
        }
        
        .hidden-link {
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: #333;
            font-size: 12px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="new-year-text">新年快乐</div>

    </div>

    <script>
        // 创建烟花效果
        function createFirework() {
            const colors = ['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f'];
            const container = document.querySelector('.container');
            
            for (let i = 0; i < 50; i++) {
                const firework = document.createElement('div');
                firework.className = 'firework';
                
                const x = Math.random() * window.innerWidth;
                const y = Math.random() * window.innerHeight * 0.8;
                const color = colors[Math.floor(Math.random() * colors.length)];
                const size = Math.random() * 10 + 5;
                const delay = Math.random() * 2;
                
                firework.style.left = `${x}px`;
                firework.style.top = `${y}px`;
                firework.style.backgroundColor = color;
                firework.style.width = `${size}px`;
                firework.style.height = `${size}px`;
                firework.style.animationDelay = `${delay}s`;
                
                container.appendChild(firework);
                
                // 移除烟花元素以节省内存
                setTimeout(() => {
                    firework.remove();
                }, 1000);
            }
        }
        
        // 创建灯笼
        function createLanterns() {
            const container = document.querySelector('.container');
            
            for (let i = 0; i < 6; i++) {
                const lantern = document.createElement('div');
                lantern.className = 'lantern';
                
                const x = i % 2 === 0 ? 50 : window.innerWidth - 110;
                const y = 50 + (Math.floor(i / 2) * 150);
                const delay = Math.random() * 2;
                
                lantern.style.left = `${x}px`;
                lantern.style.top = `${y}px`;
                lantern.style.animationDelay = `${delay}s`;
                
                container.appendChild(lantern);
            }
        }
        
        // 创建雪花
        function createSnowflakes() {
            const container = document.querySelector('.container');
            const snowflakes = ['❄', '❅', '❆', '✻', '✼'];
            
            for (let i = 0; i < 100; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                
                const x = Math.random() * window.innerWidth;
                const duration = Math.random() * 5 + 5;
                const delay = Math.random() * 5;
                const size = Math.random() * 20 + 10;
                const opacity = Math.random() * 0.7 + 0.3;
                const flake = snowflakes[Math.floor(Math.random() * snowflakes.length)];
                
                snowflake.style.left = `${x}px`;
                snowflake.style.top = `-20px`;
                snowflake.style.animationDuration = `${duration}s`;
                snowflake.style.animationDelay = `${delay}s`;
                snowflake.style.fontSize = `${size}px`;
                snowflake.style.opacity = opacity;
                snowflake.textContent = flake;
                
                container.appendChild(snowflake);
                
                // 移除雪花元素以节省内存
                setTimeout(() => {
                    snowflake.remove();
                }, duration * 1000);
            }
        }
        
        // 初始化效果
        function init() {
            createLanterns();
            createSnowflakes();
            
            // 每隔一段时间创建烟花
            setInterval(createFirework, 1000);
            
            // 持续创建雪花
            setInterval(createSnowflakes, 500);
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', init);
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值