故障毛刺文字特效（RGB 分离 + clip-path 切片 CSS 源码）

效果演示（真实可交互）

下方第一行文字自动循环播放故障效果，第二行需要把鼠标放上去才触发毛刺，适合不想干扰阅读的场景。

完整代码

HTML 结构：.glitch 元素通过 data-text 属性提供伪元素的复制文本：

<h2 class="glitch auto" data-text="粤喵组件站">粤喵组件站</h2>
<h2 class="glitch hover-only" data-text="悬停触发毛刺">悬停触发毛刺</h2>

核心 CSS：用两个伪元素各复制一份文字，分别着红绿两色并切片错位：

.glitch { position: relative; color: #e8e8e8; }
.glitch::before,
.glitch::after {
  content: attr(data-text);   /* 复制文字 */
  position: absolute; top: 0; left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.glitch::before { color: #ff3b6b; animation: sliceA 1.8s steps(1, end) infinite, shiftA 1.8s linear infinite alternate; }
.glitch::after  { color: #38f9d7; animation: sliceB 2.6s steps(1, end) infinite, shiftB 2.6s linear infinite alternate; }

/* 随机切片：clip-path 每次瞬间跳到不同高度区间 */
@keyframes sliceA {
  0%   { clip-path: inset(10% 0 62% 0); }
  20%  { clip-path: inset(55% 0 12% 0); }
  40%  { clip-path: inset(28% 0 48% 0); }
  60%  { clip-path: inset(70% 0 6% 0); }
  80%  { clip-path: inset(42% 0 35% 0); }
  100% { clip-path: inset(8% 0 78% 0); }
}
/* 错位漂移 */
@keyframes shiftA { from { transform: translate(-4px, 2px); } to { transform: translate(4px, -2px); } }

悬停触发模式：默认隐藏伪元素，hover 时才播放：

.hover-only::before, .hover-only::after { opacity: 0; }
.hover-only:hover::before { opacity: 1; animation: sliceA 1.2s steps(1, end) infinite, shiftA .6s linear infinite alternate; }
.hover-only:hover::after  { opacity: 1; animation: sliceB 1.5s steps(1, end) infinite, shiftB .8s linear infinite alternate; }

参数说明

兼容性与性能

• clip-path: inset() 与 attr() 在现代浏览器均支持，无需前缀
• 动画是 GPU 合成层的 transform + clip-path，开销可控，但伪元素复制了整段文字，长标题会占用额外内存
• 建议故障文字只用于短标题（10 字以内），长文会产生多层重影影响可读性
• 动画使用 steps 跳变而非平滑过渡，这正是”信号故障”质感的关键

常见问题

Q: 伪元素复制文字是中文会乱码吗？ 不会，attr(data-text) 直接取属性值，中文、英文、符号都能正确显示，注意属性值和元素文本保持一致。

Q: 想调故障频率？ 改动画时长，如 1.8s 改成 0.8s 会更急促；想偶尔故障一次，可以把 animation-iteration-count 设为固定次数并用延迟。

Q: 文字太多导致卡顿？ 缩短标题字数，或把 overflow: hidden 范围缩小；也可以考虑只在 hover 时触发。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。