html移动端语音波纹,html5 +css3 点击后水波纹扩散效果 兼容移动端

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