跳到主要內容

按鈕光暈脈衝

滑鼠移入觸發

懸浮後光暈持續呼吸,把視線拉到主操作上。

把滑鼠移到方塊上
這一條靠 :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); }
}