跳到主要內容

懸浮發光

滑鼠移入觸發

移入時外圈亮起一圈光暈,適合強調可點擊的操作。

把滑鼠移到方塊上
這一條靠 :hover 觸發,頁麵載入時不會自己播。滑鼠移上去、再移開就能來回看。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的 transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 懸浮發光 */
.anim-hover-glow {
  transition: box-shadow .3s ease, filter .3s ease;
}
.anim-hover-glow:hover {
  box-shadow: 0 0 0 6px rgba(37,99,235,.18), 0 0 24px rgba(37,99,235,.55);
}