html点击按钮波纹效果,让点击按钮实现波纹点击特效

.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;

}

阿里的Ant Design按钮风格也可以以这个为模板来实现

.ripple {

position: relative;

//此处不需要设置overflow:hidden,因为after元素需要溢出显示

}

.ripple:focus{

outline: none;

}

.ripple:after {

content: "";

display: block;

position: absolute;

//扩大伪类元素4个方向各10px

top: -10px;

left: -10px;

right: -10px;

bottom: -10px;

pointer-events: none;

background-color: #333;

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;

}