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

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

效果图

源文件下载

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

下载

分类: CSS 标签: 动画波纹效果

评论

暂无评论数据

暂无评论数据

目录