我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
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;通过三次变化达到波纹效果。
效果图
源文件下载
本人也提供源文件下载,有兴趣的小伙伴可以下来一起研究学习
评论(0)