css 按钮波纹 |css3 div滴落动画

css 全屏宽，css字体样式转变，css外部样式导入，css 如何设置边框阴影，css如何设置字母自动换行，好看的登入页面css，css3 div滴落动画 css 按钮波纹 |css3 div滴落动画

/* HTML *//* CSS */
.ripple-btn {
position: relative;
overflow: hidden;
padding: 12px 28px;
background-color: #0079FF;
color: #fff;
border-radius: 4px;
font-size: 16px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 
0 1px 5px 0 rgba(0,0,0,0.12), 
0 3px 1px -2px rgba(0,0,0,0.2);
}
.ripple-btn::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.5s, opacity 1s;
}
.ripple-btn:active::after {
transform: scale(0, 0);
opacity: 0.3;
transition: 0s;
}

首先大家创建一个按钮，样式包括一些基本的样式，如背景色、字体颜色、阴影等等。其次，大家使用伪元素::after来创建一个层用于实现波纹效果。最后，大家使用:active伪类选择器来触发这个波纹效果。

在这个代码中，实现动画效果的核心是scale()和opacity属性的变化。在:active状态下，大家把波纹的scale和opacity属性从原始值（10，0.3）变为（0，0）并取消过渡动画，实现一个瞬间消失的效果。

至此，大家就掌握了CSS按钮波纹的实现方法，大家可以根据自己的需求来进行调整。