雨滴动画需融合位移、透明度与形变三要素，分fall和impact两阶段实现物理感；用nth-child控制密度与随机性；必加will-change: transform, opacity提升性能；落地用clip-path模拟水花溅射。
雨滴动画的核心是位移+透明度+形变，不是单纯用 drop 类名堆叠
纯 CSS 实现“逼真雨滴”不靠图片或 SVG 插图，而依赖三个关键行为：从顶部快速下落、途中轻微左右晃动（模拟风偏）、落地前加速+拉伸+淡出。很多人直接写 @keyframes fall 从 top: 0 到 top: 100vh，结果雨滴像直线坠机——缺了物理感。
真正有效的做法是把单个雨滴拆成两个阶段动画：fall（主下落）和 impact（触屏瞬间），用 animation-delay 错开触发时机，并配合 transform: scaleY() 在末帧拉长形变。
示例关键帧片段：
@keyframes fall {
0% { top: -10px; opacity: 0; transform: scaleY(0.8); }
10% { opacity: 1; }
90% { transform: scaleY(1.2) translateX(2px); } /* 微晃+预拉伸 */
100% { top: 100vh; opacity: 0.7; transform: scaleY(0.6); }
}
用 nth-child 控制雨滴密度和随机性，别硬写 50 个 div
手写一堆 <div class="raindrop"></div> 不仅维护困难，还让 DOM 膨胀严重。实际应只生成 15–25 个元素，靠 CSS 的 :nth-child(odd)、:nth-child(3n) 等选择器差异化控制它们的 animation-duration、animation-delay 和 width。
常见错误是所有雨滴用相同 animation-duration: 1.8s，导致节奏呆板。真实雨幕有快有慢，建议范围设在 1.2s 到 2.5s 之间，并用 delay 错开起始时间（如 -0.3s 到 1.1s）。
-
:nth-child(4n)→width: 1px; height: 24px; animation-duration: 1.4s; -
:nth-child(4n+1)→width: 1.2px; height: 32px; animation-duration: 1.9s; -
:nth-child(4n+2)→width: 0.8px; height: 18px; animation-duration: 1.3s; animation-delay: -0.2s;
必须加 will-change: transform，否则 iOS Safari 会掉帧
大量雨滴同时做 transform + opacity 动画，在旧版 Safari 或低端 Android 上极易卡顿。光用 translate3d(0,0,0) 已不够，得明确告诉浏览器哪些属性会变。
正确写法是在雨滴元素上加：
.raindrop {
will-change: transform, opacity;
/* 同时确保父容器有硬件加速上下文 */
transform: translateZ(0);
}
漏掉 will-change 的后果：iPhone SE（iOS 15）上 20+ 雨滴就降到 30fps；加上后稳定 58–60fps。注意别滥用——只加在真正参与动画的元素上，否则反而增加内存开销。
落地消失效果要靠 clip-path 模拟水花溅射，不是简单 opacity: 0
多数人让雨滴到底部就 opacity: 0，看起来像“穿墙而过”，毫无撞击反馈。真实雨滴触屏瞬间会有微小扩散+碎裂感，可用 clip-path: circle() 配合 scale 模拟。
在 impact 动画中这样写：
@keyframes impact {
0% { clip-path: circle(0.5px at 50% 100%); transform: scaleY(0.6) scale(1); }
100% { clip-path: circle(8px at 50% 100%); transform: scaleY(0.2) scale(1.4); opacity: 0; }
}
关键点：圆心固定在底部中心（at 50% 100%），半径从极小值撑开，同时纵向压扁+横向略扩，比纯 fade-out 更有物理反馈。这个动画需叠加在主 fall 动画结束后立即触发，用 animation-fill-mode: forwards 锁定终态。
复杂点在于 timing：主下落动画结束时刻必须和 impact 起始帧对齐，否则出现“悬停再炸”的诡异停顿。建议统一用 animation-play-state: paused/running 或 JS 控制触发时机，CSS 纯实现容易错拍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
