雨滴效果

纯 CSS 实现的逼真雨滴下落效果，使用多条细长线条配合错开的动画延迟，营造出连绵不断的降雨氛围。

实时预览

🌧️ CSS Rain Effect

代码

css

.rain-container {
  position: relative;
  width: 100%;
  height: 300px;
  background: linear-gradient(180deg, #0a0a1a 0%, #0f172a 100%);
  overflow: hidden;
  border-radius: 12px;
}

.rain-drop {
  position: absolute;
  top: -20%;
  width: 2px;
  height: 15px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(134, 239, 172, 0.6),
    rgba(134, 239, 172, 0.1)
  );
  border-radius: 0 0 2px 2px;
  animation: rain-fall linear infinite;
}

/* Vary duration and delay per drop */
.rain-drop:nth-child(1)  { left: 5%;  animation-duration: 0.7s; animation-delay: 0s; }
.rain-drop:nth-child(2)  { left: 12%; animation-duration: 0.9s; animation-delay: 0.2s; }
/* ... add more with different values */

@keyframes rain-fall {
  0%   { top: -10%; opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

html

<div class="rain-container">
  <div class="rain-drop"></div>
  <div class="rain-drop"></div>
  <!-- 18+ rain drops with varying positions -->
</div>

纯 CSS 实现的雨滴效果背景动画——通过渐变、滤镜和 @keyframes 创建动态背景效果。无需 Canvas、WebGL 或任何 JavaScript，即可让页面背景"活"起来。

快速使用

复制 CSS 代码（含 @keyframes）到你的样式文件中
将背景动画样式应用到目标容器元素上
调整 background-size 和 animation-duration 控制效果
确保容器有明确的高度（min-height），否则背景可能不可见

使用场景

品牌落地页：用渐变流动或极光背景提升页面的高级感
技术/黑客主题页面：矩阵代码雨或粒子背景传递科技氛围
创意/设计类网站：浮动光斑或网格动画展现设计感
节日/活动页面：动态背景配合主题色营造节日氛围

常见问题

Q: 背景动画会消耗很多 CPU 吗？ A: 会消耗一定的 GPU 资源。建议在用户不可见时（如切换标签页）暂停动画，用 animation-play-state: paused 配合 document.hidden API。移动端慎用多个滤镜叠加。

Q: 如何让背景动画不影响内容可读性？ A: 在动画层之上加一个半透明遮罩层（如 background: rgba(0,0,0,0.4)），或将文字放在独立的叠层中。也可以降低动画的 opacity 到 0.3~0.5。

Q: 背景动画在所有浏览器下都正常吗？ A: conic-gradient 需要较新浏览器版本。@property 仅 Chrome/Edge。建议提供降级方案：用 linear-gradient + background-position 动画替代。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持（含 conic-gradient、@property）
Firefox	✅ 基本支持（不含 @property）
Safari	✅ 基本支持
移动端浏览器	✅ 完全支持
IE 11	❌ 高级渐变和动画不支持

使用说明

属性	说明
`animation-duration`	控制雨滴速度，越小越快
`animation-delay`	错开各雨滴时间，避免同步
`linear`	匀速下落，模拟真实雨滴
`linear-gradient`	雨滴头部实色尾部透明，更逼真
`height`	雨滴长度，15-25px 效果自然

提示： 增加更多 .rain-drop 元素并随机化 left、animation-duration、animation-delay 和 height，可以制造更密集、更自然的雨景效果。

雨滴效果 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐