按下抖动
按住触发按下时快速横向晃动,用于「不允许」或校验失败的反馈。
按住方块不放
这一条靠
:active 触发。按住方块不放,松开后重放。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的
transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 按下抖动 */
@keyframes pressShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px) rotate(-2deg); }
45% { transform: translateX(5px) rotate(2deg); }
70% { transform: translateX(-3px) rotate(-1deg); }
}
.anim-press-shake:active {
animation: pressShake .45s ease-in-out;
}