JavaScript雪花背景动画模板

2025年10月30日农场开发者 3 浏览
冬天到了，是否有想过给你的网站也添加一个雪花背景动画，让它更有氛围感呢？
如果你由此需求，那么这个素材模板正好适合你。 JavaScript雪花背景动画模板
下面我是一个优雅的雪花背景动画模板，这个模板可以添加到任何网页中，营造冬季氛围。
实现代码

<!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 {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #2a3a7c, #3a4a8c);
            color: white;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            position: relative;
            z-index: 10;
        }
        
        header {
            text-align: center;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        
        h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 1.5rem;
            width: 300px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card h2 {
            margin-bottom: 1rem;
            color: #a8d8ff;
        }
        
        .controls {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 1.5rem;
            margin: 2rem auto;
            max-width: 600px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .control-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            margin-top: 1rem;
        }
        
        button {
            background: rgba(168, 216, 255, 0.2);
            border: 1px solid rgba(168, 216, 255, 0.4);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        button:hover {
            background: rgba(168, 216, 255, 0.3);
        }
        
        button.active {
            background: rgba(168, 216, 255, 0.5);
        }
        
        #snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .snowflake {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0.8;
            filter: blur(0.5px);
        }
        
        footer {
            text-align: center;
            margin-top: 3rem;
            padding: 1rem;
            font-size: 0.9rem;
            opacity: 0.7;
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            
            .card {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div id="snow-container"></div>
    
    <div class="container">
        <header>
            <h1>❄️ 雪花背景动画模板 ❄️</h1>
            <p class="subtitle">一个优雅的JavaScript雪花背景效果，可自定义雪花数量、大小和速度</p>
        </header>
        
        <div class="content">
            <div class="card">
                <h2>特性介绍</h2>
                <p>这个模板包含多种雪花效果：</p>
                <ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
                    <li>不同形状和大小的雪花</li>
                    <li>随机飘落速度和方向</li>
                    <li>逼真的旋转动画</li>
                    <li>响应式设计</li>
                    <li>性能优化</li>
                </ul>
            </div>
            
            <div class="card">
                <h2>使用说明</h2>
                <p>您可以通过下方的控制面板调整雪花效果：</p>
                <ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
                    <li>调整雪花数量</li>
                    <li>改变雪花大小</li>
                    <li>控制雪花速度</li>
                    <li>切换雪花样式</li>
                </ul>
            </div>
            
            <div class="card">
                <h2>技术实现</h2>
                <p>这个效果使用纯JavaScript实现：</p>
                <ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
                    <li>Canvas或DOM元素渲染</li>
                    <li>requestAnimationFrame实现流畅动画</li>
                    <li>CSS3变换和过渡效果</li>
                    <li>响应式布局设计</li>
                </ul>
            </div>
        </div>
        
        <div class="controls">
            <h2 style="text-align: center;">雪花效果控制</h2>
            <div class="control-group">
                <button id="snow-density-low">少量雪花</button>
                <button id="snow-density-medium" class="active">中等雪花</button>
                <button id="snow-density-high">大量雪花</button>
            </div>
            <div class="control-group">
                <button id="snow-size-small">小雪花</button>
                <button id="snow-size-medium" class="active">中雪花</button>
                <button id="snow-size-large">大雪花</button>
            </div>
            <div class="control-group">
                <button id="snow-speed-slow">慢速</button>
                <button id="snow-speed-medium" class="active">中速</button>
                <button id="snow-speed-fast">快速</button>
            </div>
            <div class="control-group">
                <button id="snow-style-simple">简单样式</button>
                <button id="snow-style-realistic" class="active">逼真样式</button>
            </div>
        </div>
        
        <footer>
            <p>JavaScript雪花背景模板 &copy; 2023 - 可自由使用和修改</p>
        </footer>
    </div>

    <script>
        // 雪花动画核心代码
        class Snowfall {
            constructor(container) {
                this.container = container;
                this.snowflakes = [];
                this.settings = {
                    density: 'medium', // low, medium, high
                    size: 'medium',    // small, medium, large
                    speed: 'medium',   // slow, medium, fast
                    style: 'realistic' // simple, realistic
                };
                
                this.init();
                this.createSnowflakes();
                this.animate();
                this.setupEventListeners();
            }
            
            init() {
                // 根据设置确定雪花数量
                this.getSnowflakeCount();
            }
            
            getSnowflakeCount() {
                switch(this.settings.density) {
                    case 'low': return 50;
                    case 'medium': return 150;
                    case 'high': return 300;
                    default: return 150;
                }
            }
            
            getSnowflakeSize() {
                switch(this.settings.size) {
                    case 'small': return { min: 1, max: 3 };
                    case 'medium': return { min: 2, max: 5 };
                    case 'large': return { min: 3, max: 8 };
                    default: return { min: 2, max: 5 };
                }
            }
            
            getSnowflakeSpeed() {
                switch(this.settings.speed) {
                    case 'slow': return { min: 0.5, max: 2 };
                    case 'medium': return { min: 1, max: 3 };
                    case 'fast': return { min: 2, max: 5 };
                    default: return { min: 1, max: 3 };
                }
            }
            
            createSnowflakes() {
                // 清除现有雪花
                this.container.innerHTML = '';
                this.snowflakes = [];
                
                const count = this.getSnowflakeCount();
                const sizeRange = this.getSnowflakeSize();
                const speedRange = this.getSnowflakeSpeed();
                
                for (let i = 0; i < count; i++) {
                    this.createSnowflake(sizeRange, speedRange);
                }
            }
            
            createSnowflake(sizeRange, speedRange) {
                const snowflake = document.createElement('div');
                snowflake.classList.add('snowflake');
                
                // 随机大小
                const size = Math.random() * (sizeRange.max - sizeRange.min) + sizeRange.min;
                snowflake.style.width = `${size}px`;
                snowflake.style.height = `${size}px`;
                
                // 随机透明度
                snowflake.style.opacity = Math.random() * 0.5 + 0.5;
                
                // 随机起始位置
                const startX = Math.random() * window.innerWidth;
                snowflake.style.left = `${startX}px`;
                snowflake.style.top = `${-10}px`;
                
                // 雪花数据
                const snowflakeData = {
                    element: snowflake,
                    x: startX,
                    y: -10,
                    speed: Math.random() * (speedRange.max - speedRange.min) + speedRange.min,
                    amplitude: Math.random() * 20 + 10, // 摆动幅度
                    frequency: Math.random() * 0.02 + 0.01, // 摆动频率
                    angle: 0,
                    spin: Math.random() * 2 - 1 // 旋转速度
                };
                
                // 逼真样式添加模糊和阴影
                if (this.settings.style === 'realistic') {
                    snowflake.style.boxShadow = '0 0 5px rgba(255, 255, 255, 0.5)';
                }
                
                this.container.appendChild(snowflake);
                this.snowflakes.push(snowflakeData);
            }
            
            animate() {
                this.snowflakes.forEach(snowflake => {
                    // 更新位置
                    snowflake.y += snowflake.speed;
                    snowflake.angle += snowflake.frequency;
                    snowflake.x += Math.sin(snowflake.angle) * 0.5; // 轻微左右摆动
                    
                    // 旋转雪花
                    snowflake.element.style.transform = `rotate(${snowflake.angle * 20}deg)`;
                    
                    // 如果雪花飘出屏幕，重置到顶部
                    if (snowflake.y > window.innerHeight) {
                        snowflake.y = -10;
                        snowflake.x = Math.random() * window.innerWidth;
                    }
                    
                    // 应用新位置
                    snowflake.element.style.left = `${snowflake.x}px`;
                    snowflake.element.style.top = `${snowflake.y}px`;
                });
                
                requestAnimationFrame(() => this.animate());
            }
            
            updateSettings(setting, value) {
                this.settings[setting] = value;
                this.createSnowflakes();
            }
            
            setupEventListeners() {
                // 雪花数量控制
                document.getElementById('snow-density-low').addEventListener('click', () => {
                    this.updateSettings('density', 'low');
                    this.updateActiveButton('snow-density');
                });
                
                document.getElementById('snow-density-medium').addEventListener('click', () => {
                    this.updateSettings('density', 'medium');
                    this.updateActiveButton('snow-density');
                });
                
                document.getElementById('snow-density-high').addEventListener('click', () => {
                    this.updateSettings('density', 'high');
                    this.updateActiveButton('snow-density');
                });
                
                // 雪花大小控制
                document.getElementById('snow-size-small').addEventListener('click', () => {
                    this.updateSettings('size', 'small');
                    this.updateActiveButton('snow-size');
                });
                
                document.getElementById('snow-size-medium').addEventListener('click', () => {
                    this.updateSettings('size', 'medium');
                    this.updateActiveButton('snow-size');
                });
                
                document.getElementById('snow-size-large').addEventListener('click', () => {
                    this.updateSettings('size', 'large');
                    this.updateActiveButton('snow-size');
                });
                
                // 雪花速度控制
                document.getElementById('snow-speed-slow').addEventListener('click', () => {
                    this.updateSettings('speed', 'slow');
                    this.updateActiveButton('snow-speed');
                });
                
                document.getElementById('snow-speed-medium').addEventListener('click', () => {
                    this.updateSettings('speed', 'medium');
                    this.updateActiveButton('snow-speed');
                });
                
                document.getElementById('snow-speed-fast').addEventListener('click', () => {
                    this.updateSettings('speed', 'fast');
                    this.updateActiveButton('snow-speed');
                });
                
                // 雪花样式控制
                document.getElementById('snow-style-simple').addEventListener('click', () => {
                    this.updateSettings('style', 'simple');
                    this.updateActiveButton('snow-style');
                });
                
                document.getElementById('snow-style-realistic').addEventListener('click', () => {
                    this.updateSettings('style', 'realistic');
                    this.updateActiveButton('snow-style');
                });
                
                // 窗口大小变化时重新创建雪花
                window.addEventListener('resize', () => {
                    this.createSnowflakes();
                });
            }
            
            updateActiveButton(buttonGroup) {
                // 移除同组所有按钮的active类
                const buttons = document.querySelectorAll(`[id^="${buttonGroup}"]`);
                buttons.forEach(btn => btn.classList.remove('active'));
                
                // 为当前点击的按钮添加active类
                event.target.classList.add('active');
            }
        }
        
        // 初始化雪花效果
        document.addEventListener('DOMContentLoaded', () => {
            const snowContainer = document.getElementById('snow-container');
            new Snowfall(snowContainer);
        });
    </script>
</body>
</html>
功能特点

可自定义的雪花效果：
- 可调整雪花数量（少量/中等/大量）
- 可调整雪花大小（小/中/大）
- 可调整雪花飘落速度（慢/中/快）
- 可选择雪花样式（简单/逼真）
视觉效果：
- 雪花随机大小和透明度
- 自然飘落路径，带有轻微摆动
- 旋转动画增强真实感
- 响应式设计，适应不同屏幕
性能优化：
- 使用requestAnimationFrame实现流畅动画
- 控制雪花数量避免性能问题
- 窗口大小变化时自动调整
使用方法

直接将上述代码复制到HTML文件中，在浏览器中打开即可看到效果。您可以通过控制面板调整雪花效果，也可以根据需求修改代码中的参数。
这个JavaScript雪花背景动画模板可以轻松集成到任何网页中，为您的网站添加冬季氛围！
JavaScript雪花背景动画模板

实现代码

功能特点

使用方法

发表评论 取消回复

发表评论取消回复
