TEXT EFFECT
移动线影Line Shadow Text
文字背后有两层描边副本来回错动，制造「残影/回声」的动感。Magic UI 的 line-shadow-text。
效果预览
LINE SHADOW
适合用在哪
需要轻微动感的标题、音乐/潮流品牌、深色主题的文字强调。
容易踩的坑
- 字号小于 24px 时副本描边糊进主文字，看起来像渲染错误。
- 副本 data-t 与主文字不一致，切换语言后残影显示的是旧文案。
- 左右往复位移持续运行，对前庭敏感用户应在减弱动效时关闭。
设计提示词 · Prompt
移动线影（Line Shadow Text）：主文字正常填充显示。::after 用 content:attr(data-t) 复制同一段文字，颜色设为 transparent 并用 -webkit-text-stroke:1px 主色 45% 透明做描边副本。副本动画 3.2s cubic-bezier(.4,0,.2,1) 无限循环：transform 在 translateX(-5px) opacity:.2 与 translateX(7px) opacity:1 之间往复。真实实现常叠两层副本，一层向左、一层向右，形成「回声」往两侧扩散。字号 24px 以上效果最明显。
Line Shadow Text: the main text displays with a normal fill. ::after duplicates the same text with content:attr(data-t), with color set to transparent and -webkit-text-stroke:1px in the primary color at 45% opacity as an outlined copy. The copy animates 3.2s cubic-bezier(.4,0,.2,1), infinite: transform alternates between translateX(-5px) opacity:.2 and translateX(7px) opacity:1. Real implementations often stack two copies, one moving left and one moving right, forming an "echo" that spreads to both sides. The effect is most visible at font sizes above 24px.
常见搭配
同一页面里经常和「移动线影」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="tx-lshadow" data-t="LINE SHADOW">LINE SHADOW</div> </div>