css动画实现自然飘动效果需用transform位移、8–12s时长、多关键帧偏移、cubic-bezier缓动，并为每个div设不同delay/duration/幅度以避免同步；移动端需加touch-action:none防干扰。
用 CSS animation 实现 div 飘动效果最简单
直接加 @keyframes 和 animation 就能动，不需要 js。浏览器原生支持，性能好，兼容性也够（IE10+）。关键不是“怎么让它动”，而是“怎么动得自然”——飘动要有随机感、非线性、带点惯性，否则就是机械位移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translate()移动，避免触发布局重排，动画更顺 - 动画时长设成 8–12s，太短像抖，太长看不出飘
- 关键帧不要写死 0% → 100%，中间插 30%、60% 做偏移拐点，模拟不规则轨迹
- 加
animation-timing-function: cubic-bezier(0.3, 0.8, 0.5, 1)，让起停缓一点，别像弹球
div.floating { animation: float 10s ease-in-out infinite; } @keyframes float { 0% { transform: translate(0, 0); } 30% { transform: translate(15px, -20px); } 60% { transform: translate(-10px, 12px); } 100% { transform: translate(0, 0); } }想多个 div 各自飘？别共用同一 animation
所有 div 用同一个 @keyframes 和 animation 名，它们会同步飘——一眼就假。真实飘动是异步的：有的快一点，有的偏左多，有的刚飘到一半。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个 div 单独设
animation-delay，比如-2s、-5.3s，错开起点 - 用不同
animation-duration（9s / 11.5s / 13s），避免节奏重复 - 改
transform的数值幅度，比如一个上下偏 ±15px，另一个左右偏 ±25px - 别用 class 批量控制，用内联 style 或 JS 动态设更可控（但纯 CSS 也能做）
用 JS 控制飘动路径会更灵活，但容易卡
如果真要每帧算贝塞尔曲线、加物理阻尼、响应鼠标扰动，CSS 就不够用了。这时候得上 JS，但一不留神就掉帧。
常见错误现象：
- 用
setInterval+element.style.left/top—— 强制同步布局，必卡 - 在
requestAnimationFrame里反复读offsetTop—— 触发强制同步计算 - 没节流 mousemove，鼠标一划拉就疯狂更新位置
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只写
transform，别碰left、top、margin - 用
getBoundingClientRect()替代offsetTop等易触发重排的属性 - 飘动逻辑和渲染分离：用独立变量存目标位置，RAF 里只做
transform插值
移动端飘动要防 touch-action 干扰
ios safari 和安卓 chrome 默认对可滚动区域禁用某些 touch 行为，如果你的飘动 div 在页面中部、又没设 touch-action: none，手指一划可能直接触发页面滚动，飘动就中断了。
使用场景：
- 全屏背景粒子、悬停引导浮层、营销页小图标飘动
- 父容器有 overflow: scroll 时尤其明显
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给飘动元素加
touch-action: none，告诉浏览器“别管我，我不滚动不缩放” - 如果它本身需要点击，记得补上
cursor: pointer和user-select: none - 测试真机，模拟器里 touch 行为常有偏差
飘动看着简单，难点在“不规律”和“不抢眼”——飘得太猛像 bug，太慢像卡住，节奏一致又像复制粘贴。真正自然的飘，是让人注意到内容，而不是注意到它在动。