cargo-ant
Version:
A high quality UI components Library with Vue.js
28 lines (22 loc) • 516 B
text/less
// 涟漪动画效果
@ripple-prefix-cls: ~"@{css-prefix-kagou}ripple";
.@{ripple-prefix-cls} {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow: hidden;
&__item{
position: absolute;
background: hsla(0, 0%, 65%, 0.66);
border-radius: 100%;
transform: scale(0);
&.animate{
animation: ripple 0.35s linear;
}
}
}
@keyframes ripple {
100% {opacity: 0; transform: scale(2.5);}
}