按钮点按波纹
鼠标悬浮触发点下时白色波纹从中心扩散,深色按钮上尤其明显。
把鼠标移到方块上
这一条靠
:hover 触发,页面加载时不会自己播。鼠标移上去、再移开就能来回看。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的
transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 按钮点按波纹 */
@keyframes btnRipple {
from { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
to { box-shadow: 0 0 0 22px rgba(255,255,255,0); }
}
.anim-btn-ripple:active {
animation: btnRipple .55s ease-out;
}