雪花飘落js特效代码：雪花飘落JS特效代码，打造浪漫冬季网页氛围

来源：网络作者：日期：2025-11-05 06:41:46

在网页设计中,雪花飘落的特效能够为页面增添一份浪漫与冬季的氛围，无论是节日网站、冬季主题的博客，还是需要营造温馨场景的互动页面，雪花飘落的动画都能吸引访客的注意力，本文将介绍如何使用JavaScript（JS）实现一个简单而优雅的雪花飘落特效，并提供完整的代码示例。

为什么选择雪花飘落特效？

雪花飘落的动画不仅视觉效果出色,还能增强用户的沉浸感，通过简单的JS代码，你可以在网页上创建一个动态的、逼真的雪花飘落场景，而无需使用复杂的图形库或外部资源，这种效果特别适合冬季主题的网站、新年活动页面或任何需要营造节日氛围的场景。

实现雪花飘落特效的代码

下面是一个使用纯JavaScript实现的雪花飘落特效代码,该代码创建了多个雪花元素，并让它们以随机的速度和方向飘落，同时在底部逐渐消失，模拟出雪花飘落并消失的自然效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">雪花飘落特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #0a3d62; /* 深蓝色背景，模拟夜空 */
            overflow: hidden;
            height: 100vh;
        }
        .snowflake {
            position: absolute;
            color: white;
            font-size: 20px;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
            user-select: none;
        }
    </style>
</head>
<body>
    <script>
        // 雪花数量
        const snowflakeCount = 100;
        // 创建雪花
        function createSnowflakes() {
            const body = document.body;
            for (let i = 0; i < snowflakeCount; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                snowflake.innerHTML = '❄';
                body.appendChild(snowflake);
                // 随机位置
                const left = Math.random() * window.innerWidth;
                snowflake.style.left = `${left}px`;
                // 随机大小
                const size = Math.random() * 20 + 10;
                snowflake.style.fontSize = `${size}px`;
                // 随机透明度
                const opacity = Math.random() * 0.5 + 0.5;
                snowflake.style.opacity = opacity;
                // 随机动画
                const duration = Math.random() * 5 + 5;
                const delay = Math.random() * 5;
                snowflake.style.animation = `
                    fall ${duration}s linear ${delay}s infinite,
                    sway ${duration/2}s ease-in-out ${delay}s infinite alternate
                `;
                // 添加摆动动画
                const swayRange = Math.random() * 20 - 10;
                snowflake.style.setProperty('--sway-range', `${swayRange}px`);
            }
        }
        // 添加CSS动画
        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes fall {
                0% {
                    top: -50px;
                }
                100% {
                    top: 100vh;
                }
            }
            @keyframes sway {
                0% {
                    transform: translateX(calc(var(--sway-range) * -1));
                }
                100% {
                    transform: translateX(calc(var(--sway-range)));
                }
            }
        `;
        document.head.appendChild(style);
        // 初始化
        window.onload = function() {
            createSnowflakes();
            // 窗口大小变化时重新调整雪花位置
            window.onresize = function() {
                const snowflakes = document.querySelectorAll('.snowflake');
                snowflakes.forEach(snowflake => {
                    const left = Math.random() * window.innerWidth;
                    snowflake.style.left = `${left}px`;
                });
            };
        };
    </script>
</body>
</html>

代码说明

HTML结构：代码使用了简单的HTML结构，主要是一个<body>标签和一个<script>
CSS样式：
- 背景设置为深蓝色,模拟夜空。
- 雪花使用白色字体,并添加了阴影效果，使其在夜空中更加明显。
- 雪花元素使用position: absolute，以便可以自由定位。
JavaScript逻辑：
- 创建指定数量的雪花元素。
- 每个雪花的位置、大小、透明度和动画参数都是随机的，以模拟自然的雪花飘落。
- 使用CSS动画实现雪花的下落和左右摆动效果。
- 当窗口大小变化时,重新调整雪花的位置，确保它们均匀分布在屏幕上。