CSS 故障文字

GLITCH
.glitch {
  position: relative;
  color: white;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 0.05em 0 0 #ff0000, -0.03em -0.04em 0 #0000ff, 0.025em 0.04em 0 #00ff00;
  animation: glitch 2s infinite;
}
@keyframes glitch {
  0% { text-shadow: 0.05em 0 0 #ff0000, -0.03em -0.04em 0 #0000ff, 0.025em 0.04em 0 #00ff00; }
  15% { text-shadow: 0.05em 0 0 #ff0000, -0.03em -0.04em 0 #0000ff, 0.025em 0.04em 0 #00ff00; }
  16% { text-shadow: -0.05em -0.025em 0 #ff0000, 0.025em 0.035em 0 #0000ff; }
  49% { text-shadow: -0.05em -0.025em 0 #ff0000, 0.025em 0.035em 0 #0000ff; }
  50% { text-shadow: 0.05em 0.035em 0 #ff0000, 0.03em 0 0 #0000ff; }
  99% { text-shadow: 0.05em 0.035em 0 #ff0000, 0.03em 0 0 #0000ff; }
  100% { text-shadow: -0.05em 0 0 #ff0000, -0.025em -0.04em 0 #0000ff; }
}

什么是CSS 故障文字生成器？

免费在线 CSS 故障文字效果生成器，创建赛博朋克风格的文字抖动和错位动画。支持自定义颜色、速度和方向，一键复制 CSS 代码到项目中使用。

使用场景

  • ◆网页特效
  • ◆赛博朋克设计
  • ◆标题动画
  • ◆创意展示

如何使用？

  1. 1输入要生成效果的文字
  2. 2调整颜色和动画参数
  3. 3实时预览故障效果
  4. 4复制生成的 CSS 代码

功能特点

  • ✓实时预览
  • ✓自定义颜色
  • ✓CSS 代码导出
  • ✓多种动画方向

常见问题

生成的 CSS 可以直接用吗？

可以，直接复制到你项目的样式表中即可。

支持中文吗？

支持所有 Unicode 字符，包括中文。

这个工具免费吗？

完全免费，无需注册或登录。打开网页即可使用所有功能。

我的数据会被上传吗？

不会。所有处理都在浏览器本地完成，代码和数据不会离开您的设备。

可以在手机上使用吗？

可以。响应式设计确保在手机、平板和电脑上都能正常使用。

处理速度怎么样？

对于常规大小的数据，处理通常在瞬间完成。大数据量可能需要几秒钟。

相关工具推荐

CSS 文字阴影生成器

可视化创建文字阴影效果，实时预览。

CSS 按钮生成器

在线生成漂亮的 CSS 按钮代码，支持圆角、颜色和大小调整

CSS 渐变生成器

使用可视化编辑器创建漂亮的 CSS 渐变，一键复制代码。