跳到主要内容

悬浮发光

鼠标悬浮触发

移入时外圈亮起一圈光晕,适合强调可点击的操作。

把鼠标移到方块上
这一条靠 :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);
}