CSS波纹效果实现
CSS按钮波纹
我们在使用安卓手机的时候，我们点击按钮，上面都会有渐渐隐去的波纹效果，那么这种效果是如何实现的呢？我们今天一起来探讨一下
代码实现
css
.ripple {
position: relative;
}
.ripple:after {
content: "";
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left:-15px ;
pointer-events: none;
background-color: rgba(255,255,255,.7);
border-radius: 50%;
transform: scale(10);
opacity: 0;
transition: transform .8s, opacity .8s;
}
.ripple:active:after {
transform: scale(0, 0);
opacity: 0.75;
transition: 0s;
}
button {
position: relative;
margin: auto;
overflow: hidden;
padding: 1rem 2rem;
color: #fff;
background: #6200ee;
font-family: "Roboto", sans-serif;
border-radius: 0.25rem;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
outline: 0;
border: 0;
cursor: pointer;
}
html
<button class="ripple">BUTTON</button>
从开始点击到点击成功后的实现效果
本效果主要是由伪类实现的，接下来我会对它进行详细讲解
理解基础
理解我上面的代码需要有一定的基础，我们需要补补功课才行
我要讲一下伪类，后面你才会看得很明白
知识储备有两个，伪元素::after和伪类的可逆性
::after伪类
首先我们讲一下::after这个伪类，这个伪类可以理解是在元素内部末尾追加了一个元素，相当于js中的append。
但是记住它的意义和js是不一样的，js是真实的在DOM层中添加了一个元素节点，而我们的CSS伪类，它没有添加新的元素节点，但是这个元素节点的呈现效果却是有的，你能看到它，但是它在DOM树中又不是真实存在，这样的元素我们叫做伪元素，也叫作伪装元素
::before伪类
与上述after不同的是，你可以把它理解成是在元素内部最前面插入一个伪元素
不过这个和js中的追加还是不一样的，js追加的元素真实存在，伪元素的却不是真实存在的，但是我们可以在呈现树上看到效果。
HTML包括DOM文档树和呈现树
我们举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hello:before{
content: "我是p标签的before伪元素";
}
.hello:after{
content: "我是p标签的after伪元素";
}
</style>
</head>
<body>
<div class="hello">
<p>我是p标签</p>
</div>
</body>
</html>
显示效果
我们可以看到，好像p标签前面和后面就像有个元素一样，但是打开控制台一看，只能看到after和before看不到任何东西
顺便说一句，这些伪元素你也可以对它进行相对定位和绝对定位的，所以伪元素的应用大多是在做蒙层上，就是弹出对话框灰蒙蒙的效果。
伪类的可逆性质
比如我们设置一个hover伪类，当鼠标移动上去时候，设置透明度从0变成1.
但是你鼠标移出的时候，这个动画就倒过来了，也就是说它会从1变回0。这就是伪类的可逆性
波纹效果解析
有了上面的基础，我们就可以研究css代码了
我们先看第一部分代码：（仔细看注释）
.ripple {
position: relative;
}
.ripple:after {
/*设置文本内容（必须写，不然伪类会无效）*/
content: "";
display: block;
/*设置绝对定位*/
position: absolute;
/*设置宽高*/
width: 30px;
height: 30px;
/*下面4行代码是设置子元素after相对于父元素ripple水平垂直对其的*/
top: 50%;
left: 50%;
margin-top: -15px;
margin-left:-15px ;
/*设置背景色*/
background-color: rgba(255,255,255,.7);
/*设置圆角*/
border-radius: 50%;
/*设置缩放10倍*/
transform: scale(10);
/*透明度是0*/
opacity: 0;
transition: transform .8s, opacity .8s;
}
这里用的是after伪类，after伪类可以理解后面追加的元素，对它设置了绝对定位，而且设置了宽高，还设置了居中对齐
接下来就是重点，你知道active这个伪类嘛，这个伪类是元素被点击时候生效的
.ripple:active:after {
transform: scale(0, 0);
opacity: 0.75;
transition: 0s;
}
当ripple类修饰的这个元素被点击时候，触发这个伪类，这个伪类作用到after伪元素上
上面这个话有点难懂
如果我们把after伪元素当做一个span标签的话
上面的css代码就可以换元成
.ripple:active span {
transform: scale(0, 0);
opacity: 0.75;
transition: 0s;
}
好了我们再次进行换元，把after伪类的全部换元成span来理解
.ripple {
}
.ripple span {
transform: scale(10);
opacity: 0;
}
.ripple:active span{
transform: scale(0, 0);
opacity: 0.75;
transition: 0s;
}
上面的代码我简写了，就看这些属性就行，这些属性是重点中的重点
核心部分
现在我鼠标按键压下去的时候，点击ripple修饰的按钮，触发active伪类，然后作用到span标签上把缩放尺度从原来的10变为0，透明度从原来的0变为0.75
它的效果是： 放大10倍的白色透明圆，从10倍变成0倍，凝聚成一点，透明度变为0.75（由不可见的，巨大圆，变成了可见的圆点，注意看这个代码）
.ripple:active:after {
transform: scale(0, 0);
opacity: 0.75;
transition: 0s;
}
transition是0，没有过渡效果，很快非常快
当我鼠标按键抬起，点击动作完成后，active失效，执行逆转动画，缩放尺度重新由0变回10，透明度由0.75变回0）
它的效果：上述动画的逆过程，凝聚成一点的，透明度是0.75的可见的圆点，逐渐放大变成透明度为0的大圆（由可见的圆点，渐变成不可见的巨大圆圈）
注意看这里
.ripple:after{
transition: transform .8s, opacity .8s;
}
这个是有过渡效果的
这个动画它本身没有过渡效果（active点击**态），但是它的逆动画（active点击**后的状态），是有过渡效果的
所以这个波纹效果依靠的是逆向动画，立功的是逆动画。是active**之后的逆效果
搞清楚了嘛，好兄弟们？