css水波纹的代码 |css label固定宽度自适应宽度

/* 设置水波纹的样式 */
.ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
/* 设置水波纹动画的样式和过度效果 */
.ripple-button {
background-color: #006699;
color: #fff;
border-radius: 2px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.4s ease-out;
z-index: 1;
}
.ripple-button:hover {
background-color: #004466;
}
.ripple.active {
animation: ripple 1s linear;
animation-fill-mode: forwards;
}
@keyframes ripple {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(70);
opacity: 0;
}
}
/* 设置水波纹的效果 */
.ripple-effect {
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
transform: scale(0);
border-radius: 100%;
animation: ripple-out 1s linear;
}
@keyframes ripple-out {
to {
transform: scale(2.5);
opacity: 0;
}
}

通过以上代码，大家可以设置一个带有水波纹效果的按钮。大家首先需要一个包装容器，以及带有类名为“ripple-button”按钮元素。接着，大家需要使用一些过渡效果，来确保水波纹动画的播放效果更加平滑自然。

最后，通过设置一些关键帧的形式，大家在CSS中定义了水波纹的效果和过渡动画。这样大家就可以得到一个漂亮的水波纹效果。