分享一个优化版下雪JavaScript代码

名片

墨觉已认证

求：

供：

已完成：

进行中：

联系方式

私信或下方留言

供热度

置顶到期：
帖子有效期：
预计价格：暂无
状态：进行中已完成

过年了，在网上找到个下雪JavaScript代码，不过有些bug，优化了下代码如下：

js代码：

// 下雪效果
function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');
    snowflake.innerHTML = '❄'; // 雪花的图标可以更改
    const size = Math.random() * 20 + 10; // 雪花大小范围
    let initialX = Math.random() * window.innerWidth;
    snowflake.style.fontSize = `${size}px`;
    snowflake.style.left = `${initialX}px`;
    document.body.appendChild(snowflake);
    setTimeout(() => {
        snowflake.remove();
    }, 10000); // 与动画时间一致
}
function snowfall() {
    setInterval(createSnowflake, 300); // 控制雪花的生成速度
}
snowfall();

css代码：

body {
    margin: 0
}
.snowflake {
    position: fixed;
    color: #E0E0E0;
    font-size: 20px;
    animation: fall 10s linear infinite;
}
@keyframes fall {
    0% {
        top: -10px;
        transform: translateX(0);
    }
    100% {
        top: 100%;
        transform: translateX(100vw);
    }
}