css 制作下雨特效

使用 CSS 制作下雨特效

方法一：纯 CSS 动画

通过 CSS 动画和伪元素创建雨滴下落效果。

<div class="rain"></div>

.rain {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #222;
}

.rain::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 1px;
  height: 50px;
  background: linear-gradient(transparent, #fff);
  animation: rain 1s linear infinite;
}

@keyframes rain {
  0% {
    transform: translateY(-50px) rotate(15deg);
  }
  100% {
    transform: translateY(100vh) rotate(15deg);
  }
}

方法二：多雨滴效果

使用 JavaScript 动态生成多个雨滴元素，增强真实感。

<div class="rain-container"></div>

.rain-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #111;
}

.raindrop {
  position: absolute;
  width: 1px;
  height: 30px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.8));
  animation: fall linear infinite;
}

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

const container = document.querySelector('.rain-container');
const dropsCount = 100;

for (let i = 0; i < dropsCount; i++) {
  const drop = document.createElement('div');
  drop.classList.add('raindrop');
  drop.style.left = `${Math.random() * 100}%`;
  drop.style.top = `${Math.random() * -100}px`;
  drop.style.animationDuration = `${0.5 + Math.random() * 1}s`;
  drop.style.opacity = Math.random();
  container.appendChild(drop);
}

方法三：雨滴涟漪效果

添加雨滴落地时的涟漪效果，增强视觉效果。

.ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: ripple 0.5s ease-out;
  transform: scale(0);
}

@keyframes ripple {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

container.addEventListener('animationiteration', (e) => {
  if (e.target.classList.contains('raindrop')) {
    const ripple = document.createElement('div');
    ripple.classList.add('ripple');
    ripple.style.left = e.target.offsetLeft + 'px';
    ripple.style.top = '90vh';
    container.appendChild(ripple);
    setTimeout(() => ripple.remove(), 500);
  }
});

方法四：斜向雨滴

通过旋转雨滴元素创建斜向下雨效果。

.raindrop {
  transform: rotate(15deg);
}

方法五：雨滴大小和速度变化

通过随机设置雨滴高度和动画时长，模拟真实雨滴效果。

drop.style.height = `${10 + Math.random() * 20}px`;
drop.style.animationDuration = `${0.3 + Math.random() * 0.7}s`;

这些方法可以单独使用或组合使用，根据需求调整参数如雨滴数量、速度、方向和视觉效果。