给博客网站添加下雪特效 分享一个优化版下雪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);
    }
}