如何用Tailwind和React制作圆形填充动画?

问题描述 投票:0回答:1
reactjs tailwind-css css-animations font-awesome
1个回答
0
投票

您可以在元素的中心创建一个零尺寸的跨度,并通过动画来增加它的大小。从零到所需具备。隐藏溢出,您不必担心确切的尺寸。

或者你也可以做一个纯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;
    }
© www.soinside.com 2019 - 2024. All rights reserved.