纯css落叶动画关键在于模拟风力扰动、旋转偏移和非匀速下落，需为每片叶子设置不同持续时间、延迟、旋转角度及x轴偏移，采用多组预设keyframes变体（如fall-1至fall-6）、负animation-delay、cubic-bezier缓动及transform: translatez(0)触发gpu加速，避免top/left动画与fixed定位引发的穿模或重排问题。
用 transform + animation 实现真实感落叶飘落
纯 CSS 落叶动画的关键不是“画叶子”，而是模拟风力扰动、旋转偏移和非匀速下落。直接用 @keyframes 写线性 translateY 会显得僵硬，必须叠加随机性：每片叶子的持续时间、延迟、旋转角度、X 轴偏移都要不同。
实操建议：
- 用 SVG 或 PNG 作为叶子图形，
<img>或background-image均可，但推荐<img>—— 方便单独控制每片叶子的opacity和filter - 每片叶子设独立 class（如
leaf-1、leaf-2），避免所有叶子共用同一动画导致同步飘落 - 动画时长控制在
8s～14s，配合ease-in-out或自定义cubic-bezier(.3,1.2,.5,1)模拟空气阻力 - 关键帧中至少包含：
translateY(0) rotate(0deg)→translateY(100vh) rotate(720deg)，并叠加translateX的正弦扰动（用animation-timing-function模拟，不写 JS）
如何让每片叶子的轨迹真正“不重复”
CSS 本身不支持运行时随机值，但可以通过预设多组动画变体 + 批量 class 控制。比如定义 6 种基础动画：
@keyframes fall-1 { /* X 偏移小，慢速，轻微左旋 */ }
@keyframes fall-2 { /* X 偏移大，快速，右旋+翻转 */ }
/* ...直到 fall-6 */
然后给 HTML 中的叶子分配：
<div class="leaf leaf--type-3"></div><div class="leaf leaf--type-5"></div>- 再配合
animation-delay: -2s、-4.5s等负值，让动画从页面加载时就处于不同阶段 - 用
:nth-child(3n)这类选择器批量加 delay 更省事，但不如手动可控
移动端卡顿？检查 will-change 和图层提升
大量 transform 动画在低端 Android 或 iOS Safari 上容易掉帧，本质是浏览器没把叶子图层单独合成。必须显式触发 GPU 加速：
- 给每个叶子加
will-change: transform;，但别滥用 —— 只加在动画元素上，且动画结束可移除（需 JS 配合） - 更稳妥的做法是加
transform: translateZ(0);或backface-visibility: hidden;，强制创建新图层 - 避免同时对
top/left和transform动画 —— 会触发重排（reflow），直接卡死 - 叶子数量建议 ≤ 12 片；超过这个数，iOS 上
opacity动画易出现闪烁，改用visibility: hidden+transition控制淡出
为什么 position: fixed 落叶会穿模或错位
用 fixed 让叶子始终在视口内飘，看似合理，但实际会破坏层级逻辑：当页面有 transform 的容器（如轮播、弹窗）时，fixed 元素可能被裁剪或定位偏移。
- 优先用
position: absolute+ 父容器overflow: hidden，父容器设为height: 100vh即可实现“视口内飘落” - 若必须
fixed，需确保其父级没有transform、perspective或filter—— 这些属性会创建新的 containing block，使fixed相对于该容器而非视口 - 调试时打开 Chrome DevTools 的 “Layers” 面板，确认每片叶子是否单独成层，且没有意外的
Scrolling Layer
真正难的不是让叶子掉下来，而是让它掉得不像程序生成的——随机性要藏在参数里，而不是靠 JS Math.random() 补救。CSS 动画的“假随机”，靠的是人眼无法察觉的微小差异组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
