按钮扩散动画效果
背景
作为一个后端程序员,实在是对css是头疼的不行,最近有个需求针对按钮来个波纹涟漪效果。
直接上代码
.bowen {
display: inline-block;
width: 200rpx;
height: 200rpx;
position: relative;
}
.bowen::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
animation: wave 1.5s ease-out infinite;
}
[@keyframes](/user/keyframes) wave {
50%, 75% {
width: 230rpx;
height: 230rpx;
}
80%, 100% {
opacity: 0;
}
}