跳到主要內容

按下光圈

按住觸發

按下時出現雙層光圈,適合需要明顯確認的次要操作。

按住方塊不放
這一條靠 :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;
}