圣诞节到了，给网页加一个雪花飘落特效 – 网页特效库

圣诞雪花飘落效果

Categories:网页特效

by 网页特效库 |

on 30 11 月, 2024

下面是一个网页上雪花飘落效果的实现，使用HTML、CSS和JavaScript。这个实现会在网页上生成随机飘落的雪花。

在这个实现中，所有的DOM操作都在JavaScript中完成，没有额外的HTML标签用于表示雪花。以下是详细的步骤说明：

CSS样式:
- body 元素设置为无边距、无填充，并隐藏溢出内容。背景颜色设为黑色（#000）。
- .snowflake 类用于定义雪花的基本样式，包括绝对定位、白色字体、不可选中、指针事件忽略、Arial字体、不透明度为0.7。
JavaScript逻辑与交互:
- 创建一个包含150个雪花的数组 flakes。
- createSnowflake() 函数用于创建单个雪花元素，设置其初始位置、大小、动画持续时间和不透明度。
- 使用循环创建并添加所有雪花到文档中。
- animateFlakes() 函数用于更新每个雪花的位置，使其向下移动。如果雪花超出屏幕底部，则将其重新放置在顶部的随机位置。
- 使用 requestAnimationFrame() 实现平滑的动画效果。

<!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: #a9a9a9;
        }
        .snowflake {
            position: absolute;
            color: white;
            user-select: none;
            pointer-events: none;
            font-family: Arial, sans-serif;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <script>
        const numFlakes = 150; // Number of snowflakes
        const flakes = [];

        function createSnowflake() {
            const flake = document.createElement('div');
            flake.className = 'snowflake';
            flake.textContent = '❄';
            flake.style.fontSize = `${Math.random() * 20 + 10}px`;
            flake.style.left = `${Math.random() * window.innerWidth}px`;
            flake.style.top = `-${Math.random() * window.innerHeight}px`;
            flake.style.opacity = Math.random() * 0.5 + 0.5;
            document.body.appendChild(flake);
            return flake;
        }

        for (let i = 0; i < numFlakes; i++) {
            flakes.push(createSnowflake());
        }

        function animateFlakes() {
            flakes.forEach(flake => {
                const top = parseFloat(flake.style.top);
                if (top > window.innerHeight) {
                    // Reset the flake to a random horizontal position and top of the screen
                    flake.style.top = `-${parseFloat(flake.style.fontSize)}px`;
                    flake.style.left = `${Math.random() * window.innerWidth}px`;
                } else {
                    flake.style.top = `${top + 2}px`;
                }
            });
            requestAnimationFrame(animateFlakes);
        }

        animateFlakes();
    </script>
</body>
</html>

No Tag

No responses yet

发表回复取消回复