html5+ js +css3 点击后水波纹扩散效果 兼容移动端-幸凡学习网
}.center{text-align:center}.btn{position:relative;width:13em;height:3em;margin:2em;border:none;outline:none;letter-spacing:.2em;font-weight:bold;background:#999;cursor:pointer;overflow:hidden;user-select:none;border-radius:2px;color:#fff;
}button:nth-child(2){background:#4285f4;
}button:nth-child(3){background:#00bad2;
}button:nth-child(4){background:#ff8a80;
}button:nth-child(5){background:#ffae00;
}button:nth-child(6){background:#aec156;
}button:nth-child(7){background:#a060a8;
}button:nth-child(8){background:#a78660;
}button:nth-child(9){background:#5da065;
}button:nth-child(10){background:#5e6b9a;
}button:nth-child(11){background:#9a5e5e;
}button:nth-child(12){background:#666;
}.ripple{position:absolute;background:rgba(0, 0, 0, .15);border-radius:100%;transform:scale(0);pointer-events:none;
}.ripple.show{animation:ripple .75s ease-out;
}@keyframes ripple{to {
transform:scale(2);opacity:0;
}}
html5 +css3 点击后水波纹扩散效果 兼容移动端
center">
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
BUTTON
