实现效果

核心效果解析

• 霓虹色残影效果：使用 text-shadow 属性创建两个方向相反的阴影，青色向左偏移，红色向右偏移，透明度为 50%，模拟数字信号干扰的视觉效果。
• 动态抖动动画：通过自定义动画 shake-it 实现文本抖动，动画周期 0.5 秒，反向播放并无限循环。特别使用了特殊的贝塞尔曲线 (cubic-bezier (0.68, -0.55, 0.27, 1.55))，使抖动效果更具弹性和不规则感。

动画关键帧设计

• 动画过程中，左右阴影的偏移距离不断变化

• 0% 时无阴影，文本显示正常
• 25% 时阴影偏移 2px，形成基础故障效果
• 50% 时阴影偏移加大，视觉干扰增强
• 100% 时阴影方向反转，偏移量进一步增大

• 这种动态变化模拟了数字信号不稳定时的视觉效果，使文本呈现出跳动、破碎的故障感。

使用方法与扩展

要应用这种效果，只需为 HTML 中的昵称元素添加 display-name 类：

<span class="display-name">你的昵称</span>

• 如果想调整效果，可以修改以下参数

• 阴影颜色：修改 rgba 值中的颜色部分
• 抖动频率：调整 animation 的 duration 参数
• 偏移幅度：修改各关键帧中的像素值
• 抖动节奏：调整贝塞尔曲线参数或改用 linear、ease 等预设值

• 这种故障艺术风格不仅适用于抖音昵称，也可用于游戏 UI、海报设计或科技主题网站，为文本增添未来感和视觉冲击力。