跳到主要內容

按下波紋

按住觸發

按下瞬間外擴一圈波紋,Material 風格的核心回饋。

按住方塊不放
這一條靠 :active 觸發。按住方塊不放,鬆開後重放。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的 transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 按下波紋 */
@keyframes pressRipple {
  from { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
  to   { box-shadow: 0 0 0 20px rgba(37,99,235,0); }
}
.anim-press-ripple:active {
  animation: pressRipple .5s ease-out;
}