用@keyframes实现云朵飘动需设translatex(-100%)无缝循环，配合will-change:transform触发gpu加速、linear缓动、overflow:hidden防白边；云形用border-radius组合或clip-path绘制；分三层z-index模拟景深，各层duration/opacity/位移范围不同；须响应prefers-reduced-motion降级。
用 @keyframes 做云朵飘动动画，别用 transform: translateX() 硬推
纯 CSS 实现云朵飘动，核心是让云形元素在水平方向循环位移，同时控制速度、延迟和层级。直接写 transform: translateX(100vw) 会卡顿或跳帧——因为没设 transform-origin 或没配 will-change，浏览器无法提前优化。正确做法是用 @keyframes 定义平滑位移，并配合 animation-timing-function: linear 避免加速减速感。
关键点：
- 云朵容器（如
.clouds）设overflow: hidden，防止移出时露白边 - 每个云元素加
will-change: transform，触发 GPU 加速 - 不同云层用不同
animation-duration和animation-delay模拟远近错觉 - 位移终点设为
translateX(-100%)而非translateX(100vw)，确保无缝循环
用 clip-path 或 border-radius 画云形，别依赖 PNG
要真正“轻量可缩放”，云朵形状必须用 CSS 绘制。PNG 云图在高 DPI 屏或缩放时模糊，且无法响应式适配。推荐两种方案：
-
clip-path: path('M...')：精确控制贝塞尔曲线，适合现代浏览器（Chrome 102+、Firefox 110+），但 Safari 对path()支持不稳定 -
border-radius组合：用多个div叠加圆角椭圆，兼容性好（IE11 都能跑），比如一个主云体 + 三颗小云朵用border-radius: 50% / 30%
示例片段（简化版三球云）：
.cloud {
position: absolute;
background: #fff;
}
.cloud::before,
.cloud::after {
content: '';
position: absolute;
background: inherit;
}
.cloud {
width: 80px; height: 40px;
border-radius: 50% / 30%;
top: 0; left: 0;
}
.cloud::before {
width: 60px; height: 30px;
border-radius: 50% / 25%;
top: -15px; left: 20px;
}
.cloud::after {
width: 40px; height: 20px;
border-radius: 50% / 20%;
top: -10px; left: 50px;
}
多层云用不同 z-index 和动画速率，避免“同频抖动”
真实云层有远近：远处云慢、透明度低、移动距离短；近处云快、略带阴影、路径更长。如果所有云用相同 animation-duration，视觉上会像绑在一起抖动，失去景深感。
- 背景层（
z-index: 1）：duration 40s，opacity 0.4，位移范围translateX(-20%) - 中景层（
z-index: 2）：duration 25s，opacity 0.7，位移范围translateX(-35%) - 前景层（
z-index: 3）：duration 15s，opacity 0.9，加box-shadow: 0 4px 12px rgba(0,0,0,0.1)
注意：所有层的 animation-iteration-count: infinite 必须一致，否则循环不同步；animation-delay 设随机负值（如 -5s、-12s）让初始位置错开。
移动端要注意 prefers-reduced-motion 关闭动画
不少用户开启系统“减少运动”偏好，硬播动画可能引发眩晕。不处理这个，等于忽略 WCAG 可访问性基本要求。
- 用
@media (prefers-reduced-motion: reduce)包裹整个动画规则 - 在里面把
animation设为none，或退化为静态渐变背景 - 别只停掉
animation却保留transform，某些旧版 Safari 会因此错位
示例：
@media (prefers-reduced-motion: reduce) {
.cloud {
animation: none;
transform: none;
}
}
真正难的不是画出云，而是让它们呼吸般自然地滑过视口——速度差、透明度梯度、硬件加速开关、可访问性兜底，缺一不可。漏掉任意一环，用户看到的就只是“在动”，而不是“在飘”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
