故障抖动效果的核心原理是红、绿、蓝三通道视觉错位叠加：分别向不同方向偏移、微小倾斜、快速交替，通过伪元素分层模拟RGB通道，用drop-shadow()和skew()实现错位，配合跳变式动画营造数字失真感。

故障抖动效果的核心原理是什么

抖音 Logo 那种“数字信号失真”感，本质不是单纯晃动，而是三重错位叠加：红、绿、蓝通道分别向不同方向偏移 + 微小倾斜 + 快速交替。CSS 里没法直接操作 RGB 通道，但可以用 filter: drop-shadow() 模拟单色投影，再用 transform: skew() 控制角度，靠多层伪元素分层实现。

关键点在于：不能只用 animation 移动整个元素——那样是平移抖动，不是故障；必须让 R/G/B 三层内容在视觉上“脱钩”。

用伪元素模拟 RGB 三层偏移的实操步骤

• 给目标文字（比如 span）设置 position: relative，作为所有伪元素的定位基准
• 用 ::before 模拟红色通道：复制内容、设为 color: red、加 drop-shadow(2px -2px 0 red) + transform: skew(-1deg)
• 用 ::after 模拟蓝色通道：设为 color: blue、drop-shadow(-2px 2px 0 blue) + transform: skew(1.5deg)
• 原文字保留 color: white（或主色），不加阴影，作为绿色通道基准层
• 所有层都用 position: absolute 叠在一起，z-index 要错开（比如 before > original > after），否则阴影会盖住主体

注意：drop-shadow() 的偏移值不宜超过 ±3px，太大就变“描边”而不是“通道错位”；skew 角度控制在 ±2deg 内，否则像被拧弯而非抖动。

动画节奏怎么调才像真故障

故障不是匀速震动，而是短促、随机、带卡顿感的跳变。纯 @keyframes 线性动画容易显得机械：

立即学习“前端免费学习笔记（深入）”；

• 动画时长设短：整体周期建议 0.2s ~ 0.35s，太长像呼吸灯，太短浏览器吃力
• 关键帧不要用 0% → 100% 平滑过渡，改用多段突变：0%, 20%, 40%, 60%, 80%, 100% 各设不同 transform 和 filter 值
• 每层动画延迟要错开：比如 ::before 延迟 0.03s，::after 延迟 0.07s，制造“不同步”感
• 加 animation-timing-function: steps(1) 替代 ease，强制跳变，避免插值柔化

常见错误：把三层层动画 duration 设成一样、delay 全为 0，结果三道影子齐步走，像立体字，不是故障。

移动端兼容与性能避坑点

drop-shadow() 在 Safari 旧版本（iOS ≤ 14.5）中可能渲染异常或消失，需备选方案：

• 回退用 text-shadow（但只支持单层偏移，无法分 RGB）
• 或改用 SVG <feoffset></feoffset> 滤镜，兼容性更好但代码更重
• 所有动画属性优先用 transform 和 opacity，避免触发布局重排（left/top/color 等）
• 如果文字是动态插入的，确保伪元素的 content: attr(data-text) 正确读取，别漏了 data-text 属性

最易忽略的是：抖动频率太高时，部分安卓 WebView 会降帧甚至卡死，上线前务必在低端机上连真机调试，看 performance 面板的 FPS 是否稳定在 50+。