html按钮波浪,CSS 按钮水波纹特效

/* 按钮反馈之波纹 */

.ripple {

position: relative;

/* overflow:hidden */  打开注释及效果不扩散在外

}

.ripple:focus{

outline: none;

}

.ripple:after {

content: "";

display: block;

position: absolute;

top: -10px;

left: -10px;

right: -10px;

bottom: -10px;

pointer-events: none;

background-color: #888;

background-repeat: no-repeat;

background-position: 50%;

opacity: 0;

transition: all .3s;

}

.ripple:active:after {

opacity: .3;

top: 0;

left: 0;

right: 0;

bottom: 0;

transition: 0s;

}

/* 按钮反馈之波纹 */

标签：水波纹,特效,opacity,按钮,background,10px,ripple,position,CSS

来源： https://www.cnblogs.com/sillong/p/11877519.html