按下波纹
按住触发按下瞬间外扩一圈波纹,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;
}