跳到主要内容

按钮光晕脉冲

鼠标悬浮触发

悬浮后光晕持续呼吸,把视线拉到主操作上。

把鼠标移到方块上
这一条靠 :hover 触发,页面加载时不会自己播。鼠标移上去、再移开就能来回看。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的 transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 按钮光晕脉冲 */
.anim-btn-glow-pulse:hover {
  animation: btnGlowPulse 1.8s ease-in-out infinite;
}
@keyframes btnGlowPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37,99,235,.16), 0 8px 20px rgba(37,99,235,.35); }
  50%      { box-shadow: 0 0 0 10px rgba(37,99,235,.08), 0 12px 28px rgba(37,99,235,.5); }
}