CSS 文字故障效果生成器
制作克制的错位文字故障效果，在本地预览，并复制包含减少动态效果替代方案的精简 HTML 和 CSS 模式。
最多 80 个字符。复制的 HTML 会将此值同时存入文本内容和供 CSS 伪元素使用的 data-text 属性。
较慢的循环可避免快速闪烁。
实时预览
偏移文字图层
SIGNAL LOST
动画仅作装饰。预览保留一个可读文本节点，彩色图层由 CSS 伪元素绘制。
生成的 CSS 使用 ::before 和 ::after，并通过 content: attr(data-text) 读取内容。若内容动态变化，请同步可见文字和 data-text。请尊重 prefers-reduced-motion 设置，避免将动画失真用于重要内容。
使用步骤
如何使用
- 输入显示文字，并选择主文字、左侧偏移和右侧偏移的颜色。
- 调整偏移强度和循环速度，同时查看清晰可读的分层预览。
- 复制 HTML 和 CSS；在项目中更改文字时，保持文本内容与 data-text 属性同步。
克制的纯 CSS 错位效果
生成器会创建一个可见文本节点和两个具有对比偏移的 CSS 伪元素。短暂的 clip-path 变化会在有意放慢的循环中偶尔造成失真，而不是高频闪烁。效果使用标准 CSS 属性，不需要 canvas、图像、SVG、外部字体、样式表或脚本请求。
可访问文本与 data-text 限制
实际文字保留在文档中，伪元素则通过 attr(data-text) 获取内容。CSS 无法自动将普通文本同步到该属性，因此文本更改时必须同时更新两处。复制的 CSS 包含 prefers-reduced-motion 规则，可停止动画并保留静态、低不透明度的错位效果。动画效果应仅作装饰，不要将重要说明、状态或时效性信息放在失真文字中。
常见问题
你可能还想知道
为什么 HTML 会在 data-text 中重复文字？
CSS 伪元素无法直接复制元素的文本节点。data-text 属性通过 attr(data-text) 为它们提供内容，而元素本身的文字仍是可读的 HTML。
减少动态效果会隐藏信息吗？
不会。主文字仍然可见。生成的减少动态效果规则会停止伪元素动画，并保留稳定、柔和的错位样式。
所有浏览器中的效果都完全相同吗？
现代浏览器支持生成内容、变换、clip-path 和媒体查询，但字体渲染和抗锯齿会有差异。请在受众使用的浏览器和屏幕尺寸中测试最终效果。