纯css无法实现真正随机水平位移，必须用js动态生成不同animation-name或内联animation样式；推荐fixed定位+transform位移+linear缓动+初始x偏移随机化。
如何用 @keyframes 实现点赞飘屏的随机水平位移
直接说结论：纯 CSS 无法在 @keyframes 中生成真正随机值，所谓“随机水平位移”必须靠 JavaScript 动态生成不同动画名或内联 animation 样式。CSS 只能预设多套固定偏移路径，再由 JS 随机选一套应用。
常见错误是试图写 transform: translateX(calc(var(--offset) * 1px)) 并指望 CSS 变量在每个动画实例里自动变——不行，var(--offset) 是静态计算的，所有实例共享同一值。
- 每条点赞元素需独立的
animation-name（如float-123、float-456），由 JS 动态注册@keyframes float-123 { ... } - 更轻量做法：JS 不注册新动画，而是给元素加内联
style.animation，比如element.style.animation = `float-${Math.random()} 2.5s linear forwards`，再配合全局一个带transform: translateX(100vw)到translateX(-100vw)的动画，但水平起始/终点位置仍需 JS 控制 - 关键点：水平位移范围不能只靠
translateX动画本身决定，得靠 JS 设置元素初始left或transform: translateX()偏移，再让动画统一向左/右移动固定距离
为什么用 position: fixed 比 absolute 更适合飘屏
直播间通常全屏滚动或切换 tab，如果用 position: absolute，点赞元素会随父容器滚动而消失；fixed 让它脱离文档流，始终相对于视口定位，飘过时不会被遮挡或错位。
但要注意：若页面有横向滚动（比如小屏横屏直播），fixed 元素的 left 值可能超出当前视口，导致一出现就不可见。解决方案是用 transform: translateX() 替代 left，并确保初始位移在 0 到 100vw 之间。
- 推荐结构：
<div class="like-bubble" style="transform: translateX(73vw) translateY(-20px);">?</div> - 动画只控制 X 方向变化：从
translateX(73vw)→translateX(-100vw)，全程不改 Y - 避免用
top/left+fixed，因为缩放或 viewport 变化时数值易失准
@keyframes 动画中 transform 连续位移的写法要点
飘屏不是“跳到某点再动”，而是平滑划过整个屏幕。所以关键帧必须覆盖起点、中途、终点，且用 transform 而非 left/right——后者触发重排，transform 走合成层，性能好得多。
典型错误是只写 0% { transform: translateX(100vw); } 100% { transform: translateX(-100vw); }，看起来没问题，但实际飘速不均：开头慢、中间快、结尾又慢（因默认 ease 缓动）。必须显式设 linear。
- 正确声明：
@keyframes like-float { 0% { transform: translateX(100vw) translateY(-20px); } 100% { transform: translateX(-100vw) translateY(-20px); } } - 必须加
animation-timing-function: linear，否则飘动像被拽着走 - 不要在动画里改
opacity或font-size，除非明确需要淡入淡出；单纯飘屏保持这些属性不变最省性能
JS 创建飘屏元素时最容易漏掉的三个细节
多数人卡在“点了没反应”或“一堆点赞堆在左上角”，问题往往不在动画本身，而在元素注入和生命周期管理。
- 元素插入前必须设好
style.position = 'fixed'和初始transform，否则会先闪现到默认位置再跳走 - 每个元素的
animation-duration最好带小数（如2.37s），避免大量元素同时结束造成视觉卡顿；可用2 + Math.random() * 1.5生成 - 必须手动清理已结束动画：监听
animationend事件，el.remove()或el.style.display = 'none'，否则 DOM 节点越积越多，内存泄漏明显
复杂点在于：移动端 touch 事件频繁触发，可能一秒几十个点赞，得加节流；另外 iOS Safari 对 transform + fixed 组合偶尔有渲染延迟，加 will-change: transform 有时有帮助，但别滥用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
