css3 点击 水波纹样式,css 点击样式，水波纹（记录备用）

Document

.ripple {

position: relative;

overflow: hidden;

}

.ripple:after {

content: "";

display: block;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

pointer-events: none;

background-image: radial-gradient(circle, #666 10%, transparent 10.01%);

background-repeat: no-repeat;

background-position: 50%;

transform: scale(10, 10);

opacity: 0;

transition: transform .3s, opacity .5s;

}

.ripple:active:after {

transform: scale(0, 0);

opacity: .3;

transition: 0s;

}

Button

Button with very long content