纯CSS实现浪漫樱花飘落效果

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(to bottom, #1a1a2e, #16213e);
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }
        
        /* 樱花容器 */
        .sakura {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 999;
        }
        
        /* 单片樱花 */
        .sakura petal {
            position: absolute;
            width: 10px;
            height: 10px;
            background: radial-gradient(circle, #ffb7c5 0%, #ff69b4 100%);
            border-radius: 100% 0 100% 0;
            opacity: 0.8;
            animation: fall linear infinite;
        }
        
        /* 不同大小的樱花 */
        .sakura petal:nth-child(2n) {
            width: 15px;
            height: 15px;
            animation-duration: 8s;
        }
        
        .sakura petal:nth-child(3n) {
            width: 8px;
            height: 8px;
            animation-duration: 12s;
            animation-delay: -2s;
        }
        
        .sakura petal:nth-child(4n) {
            width: 12px;
            height: 12px;
            animation-duration: 10s;
            animation-delay: -5s;
        }
        
        /* 飘落动画 */
        @keyframes fall {
            0% {
                top: -10%;
                transform: translateX(0) rotate(0deg);
                opacity: 1;
            }
            25% {
                transform: translateX(50px) rotate(90deg);
            }
            50% {
                transform: translateX(-30px) rotate(180deg);
            }
            75% {
                transform: translateX(40px) rotate(270deg);
            }
            100% {
                top: 110%;
                transform: translateX(-20px) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* 文字样式 */
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            z-index: 1;
        }
        
        .content h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            text-shadow: 0 0 20px #ff69b4;
        }
        
        .content p {
            font-size: 1.2rem;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="sakura" id="sakura"></div>
    <div class="content">
        <h1>🌸 浪漫樱花 🌸</h1>
        <p>春天来了，樱花开了</p>
    </div>
    
    <script>
        // 生成樱花
        function createSakura() {
            const sakura = document.getElementById('sakura');
            const petalCount = 50;
            
            for (let i = 0; i < petalCount; i++) {
                const petal = document.createElement('petal');
                petal.style.left = Math.random() * 100 + '%';
                petal.style.animationDelay = Math.random() * 10 + 's';
                petal.style.opacity = Math.random() * 0.5 + 0.3;
                sakura.appendChild(petal);
            }
        }
        
        createSakura();
    </script>
</body>
</html>

实现原理

1. HTML结构

<div class="sakura" id="sakura">
    <!-- 樱花花瓣通过JS动态生成 -->
</div>

2. CSS核心样式

/* 樱花基础样式 */
.petal {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #ffb7c5 0%, #ff69b4 100%);
    border-radius: 100% 0 100% 0;  /* 花瓣形状 */
    opacity: 0.8;
}

关键点：

border-radius: 100% 0 100% 0 - 让方块变成花瓣形状
radial-gradient - 渐变色模拟花瓣色彩

3. 飘落动画

@keyframes fall {
    0% {
        top: -10%;
        transform: translateX(0) rotate(0deg);
    }
    25% { transform: translateX(50px) rotate(90deg); }
    50% { transform: translateX(-30px) rotate(180deg); }
    75% { transform: translateX(40px) rotate(270deg); }
    100% {
        top: 110%;
        transform: translateX(-20px) rotate(360deg);
        opacity: 0;
    }
}

动画特点：

左右摇摆 - 模拟风吹效果
旋转下落 - 更加真实
透明度渐变 - 从出现到消失

4. JavaScript生成花瓣

function createSakura() {
    const sakura = document.getElementById('sakura');
    const petalCount = 50;  // 樱花数量
    
    for (let i = 0; i < petalCount; i++) {
        const petal = document.createElement('petal');
        petal.style.left = Math.random() * 100 + '%';  // 随机位置
        petal.style.animationDelay = Math.random() * 10 + 's';  // 随机延迟
        sakura.appendChild(petal);
    }
}

进阶：自定义樱花样式

改变樱花颜色

/* 粉色樱花 */
background: radial-gradient(circle, #ffb7c5 0%, #ff69b4 100%);

/* 白色樱花 */
background: radial-gradient(circle, #fff 0%, #f0f0f0 100%);

/* 红色樱花 */
background: radial-gradient(circle, #ff6b6b 0%, #ee5a5a 100%);

改变樱花数量

修改JS中的 petalCount 变量：

浪漫氛围：petalCount = 30
密集飘落：petalCount = 100
稀疏点缀：petalCount = 15

应用场景

🎬 个人博客 - 添加浪漫氛围
💕 表白页面 - 樱花下的浪漫告白
🎂 生日祝福 - 温馨的祝福页面
📱 小程序背景 - H5页面装饰

完整代码下载

或者直接复制上面的代码保存为.html文件即可运行！

实现原理

1. HTML结构

2. CSS核心样式

3. 飘落动画

4. JavaScript生成花瓣

进阶：自定义樱花样式

改变樱花颜色

改变樱花数量

应用场景

完整代码下载

评语 (0)