按下光圈
按住觸發按下時出現雙層光圈,適合需要明顯確認的次要操作。
按住方塊不放
這一條靠
: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;
}