css 制作下雨特效
CSS 下雨特效实现方法
通过CSS动画和伪元素可以模拟逼真的下雨效果，以下是两种常见实现方式：
线性渐变动画法
通过多个线性渐变动画元素模拟雨滴下落：
.rain {
position: absolute;
width: 2px;
height: 60px;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8));
animation: rain-fall 0.8s linear infinite;
}
@keyframes rain-fall {
0% {
transform: translateY(-100px) rotate(15deg);
opacity: 1;
}
100% {
transform: translateY(calc(100vh + 100px)) rotate(15deg);
opacity: 0.2;
}
}伪元素随机动画
利用伪元素创建随机分布的雨滴：
body::before {
content: "";
position: fixed;
top: -100vh;
left: 0;
width: 100vw;
height: 200vh;
background:
repeating-linear-gradient(
to bottom,
transparent 0,
rgba(255, 255, 255, 0.1) 1px,
transparent 1px,
transparent 10px
);
animation: rain-flow 2s linear infinite;
}
@keyframes rain-flow {
0% { transform: translateY(0); }
100% { transform: translateY(100vh); }
}增强效果技巧
添加雨滴涟漪效果增强真实感：
.ripple {
position: absolute;
width: 10px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
animation: ripple 0.5s ease-out infinite;
}
@keyframes ripple {
0% { transform: scale(0.2); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}使用JavaScript动态生成雨滴：
function createRain() {
const rainCount = 100;
for(let i=0; i<rainCount; i++){
const rain = document.createElement('div');
rain.className = 'rain';
rain.style.left = `${Math.random()*100}vw`;
rain.style.animationDuration = `${0.5 + Math.random()}s`;
rain.style.animationDelay = `${Math.random()}s`;
document.body.appendChild(rain);
}
}性能优化建议
使用will-change属性提升动画性能：
.rain {
will-change: transform, opacity;
}减少雨滴数量在移动设备上的显示：
@media (max-width: 768px) {
.rain { display: none; }
body::before { opacity: 0.5; }
}
