TEXT EFFECT
记号笔高亮Highlighter
一条带斜切边缘的彩色高亮从左往右刷过关键词，模拟荧光笔手写。Magic UI 的 Highlighter 即此。
效果预览
把每一处细节做成体系
而不是凭感觉
而不是凭感觉
适合用在哪
正文里的关键短语、FAQ 答案的重点、需要「划重点」但不想加粗的场景。
容易踩的坑
- 高亮循环播放让正文持续闪动，读者无法专心阅读该段落。
- 黄色高亮配浅灰文字，叠加 multiply 后对比度低于 4.5:1。
- 一段里高亮超过 2 处，重点变得没有重点。
设计提示词 · Prompt
记号笔高亮（Highlighter）：关键词包一层 <em>，position:relative。::after 放在文字下方 1px 处、左右各超出 2px、高 9px、圆角 2px，背景用 linear-gradient(100deg, rgba(250,204,21,.4), rgba(250,204,21,.8)) 模拟笔触深浅；transform-origin:left，动画 3.4s cubic-bezier(.5,0,.5,1) 无限循环把 scaleX 从 0 到 1 再回到 0。因为要盖在文字上又不遮字，给伪元素加 mix-blend-mode:multiply（暗色主题改用 screen）。可换任意颜色，如淡绿 #bbf7d0、淡蓝 #bfdbfe。
Highlighter: wrap the key phrase in an <em> with position:relative. Its ::after sits 1px below the text, extends 2px beyond each side, is 9px tall with border-radius 2px, and uses background linear-gradient(100deg, rgba(250,204,21,.4), rgba(250,204,21,.8)) to simulate marker stroke depth; with transform-origin:left, a 3.4s cubic-bezier(.5,0,.5,1) infinite animation takes scaleX from 0 to 1 and back to 0. Because it must overlay the text without hiding it, give the pseudo-element mix-blend-mode:multiply (use screen in dark themes). Any color works, such as light green #bbf7d0 or light blue #bfdbfe.
常见搭配
同一页面里经常和「记号笔高亮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="tx-hl">把每一处细节<em>做成体系</em><br>而不是凭感觉</div> </div>