首页 » CSS » css动画之jojo波纹(波纹动效)

最后更新于 2019年04月10日

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

我们首先做一个分析,他首先它的本质就是一个圆圈在渐变放大然后缩小的过程,然后通过三个圆圈达到波动的效果,那么我们就可以通过动画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;通过三次变化达到波纹效果。

效果图

源文件下载

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

下载

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao