html中雪花掉落代码

在 HTML 中，我们可以通过一些代码实现雪花掉落的效果，让网页增添一份冬日的气息。

!DOCTYPE html>
    html>
    head>
        title>
    雪花掉落/title>
        meta charset="UTF-8">
        style>
        * {
                margin: 0;
                padding: 0;
        }
        body {
                overflow: hidden;
        }
        .snowflake {
                position: absolute;
                width: 5px;
                height: 5px;
                background-color: #fff;
                border-radius: 50%;
                box-shadow: 0 0 2px #fff;
                animation: snowfall linear infinite;
        }
        @keyframes snowfall {
            0% {
                    transform: translateY(0);
            }
            100% {
                    transform: translateY(100vh);
            }
        }
        /style>
    /head>
    body>
        script>
        // 创造雪花        function createSnowflake() {
                const snowflake = document.createElement("div");
                snowflake.classList.add("snowflake");
                snowflake.style.left = Math.random() * window.innerWidth + "px";
                snowflake.style.animationDuration = Math.random() * 3 + 2 + "s";
                document.body.appendChild(snowflake);
                // 完成后删除            snowflake.addEventListener("animationend", () =>
 {
                    snowflake.remove();
                    createSnowflake();
            }
)        }
            // 生成雪花，控制生成速度        setInterval(createSnowflake, 100);
        /script>
    /body>
    /html>
    

代码解释：

首先，我们需要给 body 添加 overflow: hidden，以便让雪花掉落在可视窗口之内。

接下来，我们定义了一个 .snowflake 的样式，样式中包含了雪花的尺寸、背景色、边框半径、模糊阴影等属性，并添加了 animation 属性，使得每个雪花都会执行 snowfall 动画。

我们使用 @keyframes 定义了 snowfall 动画，从 translateY(0) 即初始状态开始，执行到 translateY(100vh) 即滑落至可视窗口底部停止，动画时间为 100vh 的高度除以雪花下落速度。

接下来我们通过 JavaScript 动态生成雪花，给每个雪花随机的 left 距离和动画持续时间，并使用 setInterval 控制生成速度。

最后，我们使用 snowflake 对象的 animationend 事件来监听动画结束并移除该雪花，以达到优化的目的。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！