[分享]css3实现雨点下落

CSS3可以实现一些非常酷炫的效果，比如让页面中出现雨点下落的特效。接下来我们就来介绍如何实现这一效果。// 定义雨滴样式 .raindrop { width: 2px; height: 20px; ...

CSS3可以实现一些非常酷炫的效果，比如让页面中出现雨点下落的特效。接下来我们就来介绍如何实现这一效果。

// 定义雨滴样式
.raindrop {
    width: 2px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 100%;
}

// 定义雨滴动画
@keyframes raindrop-fall {
    0% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(100vh);
    }
}

// 定义雨滴容器样式
.rain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

// 让雨滴动起来
.raindrop {
    animation: raindrop-fall 1s linear infinite;
}

// 在容器中随机生成雨滴
function createRain() {
    let container = document.querySelector('.rain-container');
    for (let i = 0; i < 100; i++) {
        let drop = document.createElement('div');
        drop.classList.add('raindrop');
        drop.style.left = Math.random() * 100 + '%';
        drop.style.animationDelay = Math.random() * 2 + 's';
        container.appendChild(drop);
    }
}

// 调用createRain()函数开始下雨
createRain(); 

通过上述代码，我们定义了一个雨滴的样式和动画，并且在雨滴容器中生成了100个随机的雨滴，调用createRain()函数开始下雨。

如果你想让雨滴的速度更缓慢，可以将animation-duration属性设置为更大的值。如果你想让雨滴的数量更多或更少，可以调整for循环中的i的值。

希望这篇文章能帮助你实现一个很酷的效果，让你的网页更加生动有趣。