CSS波纹效果实现

最新推荐文章于 2024-02-11 10:47:26 发布

大前端工程师

最新推荐文章于 2024-02-11 10:47:26 发布

阅读量1.8k

点赞数 2

分类专栏： CSS魔法文章标签： css css3 animation html

程麒阁-大连大学-软件工程学院

本文链接：https://blog.csdn.net/chengqige/article/details/119153712

版权

CSS魔法专栏收录该内容

3 篇文章 2 订阅

订阅专栏

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激活之后的逆效果

搞清楚了嘛，好兄弟们？

大前端工程师

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS波纹效果实现

CSS按钮波纹我们在使用安卓手机的时候，我们点击按钮，上面都会有渐渐隐去的波纹效果，那么这种效果是如何实现的呢？我们今天一起来探讨一下代码实现css.ripple { position: relative;}.ripple:after { content: ""; display: block; position: absolute; width: 30px; height: 30px; top: 50%; left: 50%;
复制链接

扫一扫