您可以在元素的中心创建一个零尺寸的跨度,并通过动画来增加它的大小。从零到所需具备。隐藏溢出,您不必担心确切的尺寸。
或者你也可以做一个纯CSS的解决方案。我也做过类似的事情,就是按钮上产生涟漪。我可以给你代码,你可以修改它以具有纯色并且不会消失
.ripple {
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, rgba(0, 0, 0, 0.4) 10%,
transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.5s,
opacity 1s;
}
.ripple:active::after {
transform: scale(0, 0);
opacity: 0.2;
transition: 0s;
}