动画 · 注意力引导 · 01
脉冲 CTA 脉冲 CTA = 主行动按钮以轻微缩放与发光循环呼吸，把视线引向最关键的那一个操作。
直达修改 Prompt →
Get started
播放 暂停 重播
尊重 prefers-reduced-motion：动画关闭，仅保留终态。
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a pulse CTA button animation: scale 1 to 1.05 on a 1.8s ease-in-out loop, with a soft glow that blooms via box-shadow. Transform and opacity only.
Tone the pulse down to a slow outer-ring pulse: keep the button static, animate only a 2px accent ring expanding and fading on a 2.4s loop.
Build a pulse CTA that starts on load, pauses while hovered or focused, and respects prefers-reduced-motion by switching to a steady 2px accent ring. Expose --pulse-color so the accent is themeable. Never animate width or height.
修改类 Prompt 只动目标，不碰页面其余部分。
脉冲 CTA是什么？ 脉冲 CTA 不用大喊也能吸睛。按钮在慢速循环里放大一毫、晕开一层柔光，让眼睛落在最关键的那一个操作上。做过头像警报灯，做得好就是「这才是按钮」。
动画 标本
触发 load
技术 css
时长 1.8s
缓动 ease-in-out
性能 transform, opacity, box-shadow 什么时候用 One primary CTA in a hero or empty state A single conversion button you must lift above the noise 什么时候别用 More than one pulse on screen — they cancel each other out Error or destructive actions — pulsing reads as alarm One pulse per screen. If two buttons breathe, neither gets attention.
获取代码 复制 CSS
CSS HTML
.anim-el {
animation-iteration-count: infinite;
animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }
.pulse-cta-btn {
animation-name: pulse;
animation-duration: var(--anim-duration, 1.8s);
animation-timing-function: var(--anim-easing, ease-in-out);
border: 0;
border-radius: 12px;
padding: 14px 26px;
font: 600 15px/1 'Plus Jakarta Sans', system-ui, sans-serif;
color: #fff;
background: var(--anim-accent);
cursor: pointer;
}
@keyframes pulse {
0%, 100% { transform: scale(1); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--anim-accent) 45%, transparent); }
50% { transform: scale(1.05); box-shadow: 0 10px 34px -6px color-mix(in srgb, var(--anim-accent) 65%, transparent); }
} <button class="pulse-cta-btn anim-el">Get started</button> 复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。
复制 Prompt Create a pulse CTA button animation: scale 1 to 1.05 on a 1.8s ease-in-out loop, with a soft glow that blooms via box-shadow. Transform and opacity only.