当前位置：首页 > article >正文

javascript实现雪花飘落效果

article 2025/3/4 1:44:53

本文实现雪花飘落效果的 JavaScript 网页设计案例，代码实现如下：

<!DOCTYPE html>
<html lang="en">

<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-color: #000;
        }

        .snowflake {
            position: absolute;
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <script>
        // 定义雪花数量
        const NUM_SNOWFLAKES = 100;

        // 获取页面宽度和高度
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;

        // 创建雪花元素并添加到页面
        for (let i = 0; i < NUM_SNOWFLAKES; i++) {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            // 设置随机的初始位置
            snowflake.style.left = Math.random() * windowWidth + 'px';
            snowflake.style.top = Math.random() * windowHeight + 'px';
            // 设置随机的大小
            const size = Math.random() * 3 + 2;
            snowflake.style.width = size + 'px';
            snowflake.style.height = size + 'px';
            // 设置随机的透明度
            snowflake.style.opacity = Math.random();
            // 设置随机的下落速度
            snowflake.speed = Math.random() * 3 + 1;
            document.body.appendChild(snowflake);
        }

        // 定义雪花飘落动画函数
        function animateSnowflakes() {
            const snowflakes = document.querySelectorAll('.snowflake');
            snowflakes.forEach(snowflake => {
                let top = parseInt(snowflake.style.top);
                top += snowflake.speed;
                if (top > windowHeight) {
                    // 当雪花落到页面底部时，重新放置到页面顶部
                    top = -10;
                    snowflake.style.left = Math.random() * windowWidth + 'px';
                }
                snowflake.style.top = top + 'px';
            });
            // 实现动画效果
            requestAnimationFrame(animateSnowflakes);
        }

        // 启动动画
        animateSnowflakes();
    </script>
</body>

</html>