CSS实现雪花粒子生成特效是比较常见的效果,通过CSS样式实现雪花的移动、颜色、大小等特效,让网页更具有节日氛围,下面我们来一起学习一下实现方法。
/* CSS样式 */
.sNow {
position: absolute; /* 定位 */
top: -10px; /* 初始位置 */
left: 0; /* 初始位置 */
animation: drop 2s linear infinite; /* 动画效果 */
transform: rotate(45deg) scale(0.75); /* 旋转和大小 */
}
/* 动画 */
@keyframes drop {
0% {
transform: translateY(0); /* 初始位置 */
}
100% {
transform: translateY(100vh); /* 结束位置 */
}
}
/* 生成雪花 */
function createSNow() {
const sNowDiv = document.createElement('div');
sNowDiv.className = 'sNow';
const sNowIcon = document.createTextNode('❄');
sNowDiv.appendChild(sNowIcon);
document.body.appendChild(sNowDiv);
}
/* 随机生成雪花 */
function createSNows() {
for (let i = 0; i
上述代码中,通过CSS样式设置雪花的初始位置、动画、颜色、大小等,同时通过JavaScript生成多个雪花元素,实现雪花粒子的效果。