CSS + JavaScript 实现雪花飘落的效果

在这个教程中，我们将使用 HTML、CSS 和 JavaScript 创建一个雪花飘落的效果。雪花通过 CSS 设置字体图像来实现（图像字体可以从 iconfont 等网站下载），而 JavaScript 用于随机生成和移动雪花，模拟其从屏幕顶部飘落至底部的效果。

创建 HTML 和 CSS

创建一个简单的 HTML 文件，并引入一个自定义字体。这个字体中包含雪花图像字符。在 @font-face 中定义字体文件，然后在 CSS 中将雪花样式设置为绝对定位，这样就可以通过 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>
        @font-face {
            font-family: 'icon';
            src: url("css/font/icon.ttf"), url("css/font/icon.eot");
        }

        body {
            background-color: black;
            margin: 0;
            overflow: hidden;
        }

        .snowflake {
            font-family: 'icon';
            color: #fff;
            position: absolute;
            top: -100px;
        }
    </style>
</head>
<body>
</body>
</html>

使用 JavaScript 生成雪花

通过 JavaScript 动态生成雪花。每个雪花是一个 div 元素，包含字符 “j”，这个字符在字体中表示雪花。使用随机值来控制雪花的大小和水平位置（left 值）。

window.onload = () => {
    const bd = document.body;  // 获取body
    const winHeight = window.innerHeight;
    const winWidth = window.innerWidth;

    function createSnowflake() {
        const snowDiv = document.createElement('div');
        snowDiv.innerHTML = 'j';  // 字体图像的代码为“j”，代表雪花
        const size = 20 + parseInt(Math.random() * 30);  // 随机生成雪花的大小
        const left = parseInt(winWidth * Math.random() * 0.98);  // 随机生成雪花的left值
        snowDiv.style.fontSize = size + 'px';
        snowDiv.style.left = left + 'px';
        snowDiv.className = 'snowflake';  // 添加CSS类
        bd.appendChild(snowDiv);  // 将雪花添加到文档中
        return snowDiv;
    }

移动雪花

通过 JavaScript 的 setInterval 函数让雪花从顶部慢慢向下飘动，直到它们落到底部，每个雪花的下落速度是随机的。

    function moveSnowflake(snowflake, speed) {
        let top = 0;
        const timer = setInterval(() => {
            top += speed;
            snowflake.style.top = top + 'px';

            if (top > winHeight - 20) {
                clearInterval(timer);
            }
        }, 30);
    }

清理旧的雪花

为了防止页面卡顿，定期清理掉已经生成的部分雪花。

    setInterval(() => {
        const snowflakes = document.getElementsByClassName('snowflake');
        for (let i = 0; i < snowflakes.length / 3; i++) {
            snowflakes[i].parentNode.removeChild(snowflakes[i]);
        }
    }, 20000);

以上就是本文的全部内容，通过简单的 HTML、CSS 和 JavaScript，就可以实现一个动态的雪花飘落效果。

相关文章：

本文标签: