跳到主要内容

按下光圈

按住触发

按下时出现双层光圈,适合需要明显确认的次要操作。

按住方块不放
这一条靠 :active 触发。按住方块不放,松开后重放。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的 transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 按下光圈 */
@keyframes pressRing {
  from { box-shadow: 0 0 0 0 rgba(37,99,235,.45), 0 0 0 0 rgba(37,99,235,.3); }
  to   { box-shadow: 0 0 0 10px rgba(37,99,235,0), 0 0 0 22px rgba(37,99,235,0); }
}
.anim-press-ring:active {
  animation: pressRing .6s ease-out;
}