css动画之jojo波纹（波纹动效）

先看看仿制的原作动画效果

我们首先做一个分析，他首先它的本质就是一个圆圈在渐变放大然后缩小的过程，然后通过三个圆圈达到波动的效果，那么我们就可以通过动画annimation来制作。

首先可以明确一点就是，他们的动画是一样的，只是触发的时间不同，那么就很简单了，动画提供延时功能，我们只需要控制三个动画的延迟即可。

HTML部分：

<div class="pos">
    <div id="box">
        <a href="#" class="img_pox">
            <img src="images/about.jpg" alt="头像" />
        </a>
    </div>
</div>

简单的html结构完成，我们让a元素inline-block化，这样就可以使用两个伪元素，然后给box的div再加一个伪元素，这样三个圆圈就有了。

我们给box添加relative，然后设置好大小，通过pox控制位置，因为a的父元素是box，那么a元素的伪元素即便设置absolute也不会超出父元素，这样a元素就不用再写relative了，又省了一个css书写。

CSS部分：

#box {
    width: 50px;
    height: 50px;
    position: relative;
}
#box .img_pox {
    display: inline-block;
}
#box::before,#box .img_pox::before,#box .img_pox::after {
    content: "";
    position: absolute;
    top: 0;bottom: 0;
    left: 0;right: 0;
    background: rgba(102,173,68,.6);
    border-radius: 50%;
    z-index: -1;
}
#box .img_pox img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    vertical-align: middle; 
}

首先伪元素使用了absolute，那么他在层叠上下文中是处于高层的，会挡住内容部分的展示，所以我们通过z-index:-1;将他的层叠位置放于-1中，这样就处于背景层的下方，但是div和a元素并没有设置背景色，所以不用担心被遮盖，但是遮盖也无所谓了，因为伪元素展示的部分是超出的部分。

CSS动画

通过上面的图，我们可以判断，他的动画是对半开的，也就是0%-50%的时候是放大的过程，50%-100%的时候是缩小过程，那么就可以这样写

@keyframes one{
    50% {
        margin: -30px;
        background: rgba(102,173,68,.3);
    }
    100% {
        margin: 0;
        background: rgba(102,173,68,.6);
    }
}

0%的时候就是初始值，初始值直接在上面的css已经设置好了，我们只需要写两个状态，50%和100%的时候，通过margin的负值，可以将元素放大，100%的时候再归零即可，然后渐变通过rgba的透明值大小变化即可。

下面就是动画的调用了，从上面的动画我们可以看出，他是从快到慢的一个过程，那么就可以使用ease-out了，于是如下;

#box::before {
    animation: one 1.5s ease-out;
}
#box .img_pox::before {
    animation: one 1.5s ease-out .5s;
}
#box .img_pox::after {
    animation: one 1.5s ease-out 1s;
}

box第一个触发，1.5s的时间，ease-out，a元素的before第二个触发，但是要有.5s的延迟，after第三个触发，延迟1s，这样就可以在上一个伪元素达到-30px的范围之前触发，然后又在上一个伪元素快要收缩的时候达到-30px；通过三次变化达到波纹效果。

效果图

源文件下载

本人也提供源文件下载，有兴趣的小伙伴可以下来一起研究学习

下载