当前位置：首页 > CSS

css 制作下雨特效

2026-02-13 10:39:31CSS

CSS 制作下雨特效

使用关键帧动画和伪元素

通过 @keyframes 和 ::before/::after 伪元素模拟雨滴下落效果：

.raindrop {
  position: absolute;
  width: 2px;
  height: 10px;
  background: linear-gradient(to bottom, transparent, #00b4ff);
  border-radius: 0 0 5px 5px;
  animation: rain 1s linear infinite;
}

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

随机生成雨滴位置

通过 JavaScript 动态创建雨滴元素并设置随机属性：

function createRain() {
  const rainContainer = document.querySelector('.rain-container');
  const dropCount = 100;

  for (let i = 0; i < dropCount; i++) {
    const drop = document.createElement('div');
    drop.className = 'raindrop';
    drop.style.left = `${Math.random() * 100}vw`;
    drop.style.animationDuration = `${0.5 + Math.random() * 1.5}s`;
    drop.style.animationDelay = `${Math.random() * 2}s`;
    rainContainer.appendChild(drop);
  }
}

添加雨滴溅起效果

使用伪元素模拟雨滴落地时的溅射效果：

.raindrop::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: splash 0.5s ease-out infinite;
}

@keyframes splash {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}

多层雨幕增强立体感

创建不同速度的多层雨幕模拟景深效果：

.raindrop.far {
  height: 6px;
  opacity: 0.3;
  animation-duration: 2s;
}

.raindrop.near {
  height: 12px;
  opacity: 0.6;
  animation-duration: 0.8s;
}

背景模糊和色调调整

添加滤镜增强雨天氛围：

.rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  filter: blur(1px) brightness(0.8);
  z-index: 100;
}

完整实现示例

HTML 结构：

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

JavaScript 初始化：

window.addEventListener('DOMContentLoaded', () => {
  createRain();
});

性能优化建议

使用 will-change 属性提升动画性能：

.raindrop {
  will-change: transform, opacity;
}

限制雨滴数量避免性能问题：

const dropCount = Math.min(150, window.innerWidth / 3);

响应式调整

根据窗口大小动态调整雨滴密度：

css 制作下雨特效

function adjustRainDensity() {
  const container = document.querySelector('.rain-container');
  container.innerHTML = '';
  createRain();
}

window.addEventListener('resize', adjustRainDensity);