MICRO-INTERACTION
注意力脉冲Attention Pulse
按钮外围持续扩散淡淡的同色光环，像心跳一样把视线吸过来。最轻量的「引导点击」手段。
效果预览
免费开始使用
适合用在哪
首屏主 CTA、限时活动的入口、新手引导里唯一该点的那个按钮。一屏最多一处。
容易踩的坑
- 一屏有两处以上在脉冲，视线来回跳动，没有一个能被优先点击。
- 用户已点击或完成引导后脉冲仍在，持续打扰显得像广告。
- 脉冲光环溢出到相邻按钮上，误导用户以为那是被推荐的选项。
设计提示词 · Prompt
注意力脉冲（Attention Pulse）：按钮本身是渐变底 + 主色阴影的胶囊。::before 与 ::after 各画一层 1.5px 同色系描边，动画 2.2s ease-out 无限循环：transform 从 scale(1) opacity:.85 到 scale(1.42, 1.85) opacity:0（纵向扩散略大，模拟呼吸）。两层错开 1.1s 的 animation-delay，让脉冲连续不断而不至于像闪烁。千万避免用 opacity 高频闪烁（有光敏性癫痫风险），扩散式脉冲是安全做法。用户在系统层开启「减少动态效果」时应当停止该动画。
Attention Pulse: the button itself is a pill with a gradient background + primary-color shadow. ::before and ::after each draw a 1.5px stroke in the same color family, animating 2.2s ease-out, infinite: transform from scale(1) opacity:.85 to scale(1.42, 1.85) opacity:0 (slightly larger vertical spread to simulate breathing). Offset the two layers' animation-delay by 1.1s so the pulse is continuous without looking like flashing. Strictly avoid high-frequency opacity flashing (photosensitive epilepsy risk); a spreading pulse is the safe approach. Stop the animation when the user enables "reduce motion" at the system level.
常见搭配
同一页面里经常和「注意力脉冲」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <span class="mi-pulse"><span class="mi-pulse__b">免费开始使用</span></span> </div>