js飘落效果

// 创建雪花元素
function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.className = 'snowflake';
    snowflake.style.left = `${Math.random() * 100}vw`;
    snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`;
    document.body.appendChild(snowflake);
    // 移除超出视口的雪花
    snowflake.addEventListener('animationend', () => {
        snowflake.remove();
    });
}

// 开始飘落效果
setInterval(createSnowflake, 100);

/* CSS部分 */
.snowflake {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}