Glitch 故障效果

生成赛博朋克风格的故障文字动画，可调整错位颜色、距离与速度

Glitch 效果配置

调整参数实时预览故障文字效果，一键复制 CSS

实时预览
GLITCH
生成 CSS 代码 
// 调整参数后此处自动更新...
广告位

使用说明

  1. 输入要应用故障效果的文字内容（建议 4-10 个字符）
  2. 调整主色（文字本身颜色）与两个错位色（::before / ::after 伪元素颜色）
  3. 拖动滑块调整错位距离（1-10px）与动画速度（0.5-3s）
  4. 也可点击预设方案快速套用常见配色
  5. 预览区实时显示故障动画效果
  6. 点击"复制 CSS"按钮将完整代码（含 @keyframes）复制到剪贴板

适用场景

  • 科幻主题：赛博朋克、未来感网站标题
  • 游戏页面：游戏宣传、电竞活动横幅
  • 错误提示：404 页面、系统错误提示
  • 视觉创意：海报设计、艺术作品标题
  • 视频片头：科技类视频片头字幕

安全保障

  • 本地生成：CSS 代码全部在浏览器本地生成
  • 纯 CSS 实现：无 JS 依赖，复制即可使用
  • 无网络请求：参数调整过程不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

clip-path 在故障效果中起什么作用？

clip-path 用于裁剪伪元素的可见区域。通过 @keyframes 动画在不同时间点切换不同的 clip-path 值（如 inset(20% 0 60% 0)），让伪元素只显示局部条带，从而模拟出"信号错位"的故障感。这是 Glitch 效果的核心实现手法。

为什么用 ::before 和 ::after 两个伪元素？

两个伪元素分别向左右两侧偏移并使用不同的颜色（如青色与品红），形成 RGB 通道分离的视觉错觉。两者使用不同的 @keyframes 动画时序，让错位效果不规则变化，更接近真实故障信号。

文字太长时效果会变差吗？

是的。故障效果对短文字（如标题、Logo）表现最佳。长文字会因 clip-path 覆盖整个文本行导致错位效果不明显，且动画过于密集会让人眼疲劳。建议每个文字不超过 10 个字符。

动画速度怎么选合适？

速度过快（<0.5s）会让人眼花，过慢（>3s）则失去故障感。建议标题使用 1-2s，营造间歇性故障感。可配合 animation-iteration-count: infinite 让动画循环播放，或仅在 hover 时触发以提升用户体验。