给自己的网站添加下雪特效代码-QQ沐编程

特效介绍

给自己的网站添加下雪特效，看起来像真的下雪了一般，可以在冬天营造氛围，喜欢的朋友可以进行设置一下，特效分为两部分，一部分css另一部分js

CSS代码如下

将代码放到style标签里面，如果你的网站是wordpress,可以保存到主题设置-自定义代码：自定义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);
    }
}

JS代码

将代码放到script标签里面，如果你的网站是wordpress,保存到主题设置-自定义代码：自定义JavaScript代码中，其他程序根据自己的情况来

// 下雪效果
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();