炫酷的流动边框

原创 MU薇 1946bv1946伟德游戏下载 CSS 7.3k阅读 2016-06-22 13:18:56 举报
那天浏览前端信息的时候看到汇智网的这个效果,觉得很神奇,于是照着它的代码仿照了一遍,我们先看一下具体的效果,如下:
html 代码
一开始的时候觉得有点难以理解,拆开来就很容易明白了。
先通过before做一个和div一样大的盒子,我们叫它A,并使用margin撑开,并且给边框或者阴影(就是移动的那两条线了),效果如下:
html 代码
这时候开始对他进行裁切,为了方便理解,我们先给盒子A一个背景颜色,效果如下:
html 代码
这时候,我们需要了解一下裁切属性:clip:rect (top, right, bottom, left),可以看到,参数是按照上右下左的方向
clip:rect(0,100px,50px,20px):
上为0,下为50px,所以显示出来的盒子A的高度就是从0开始至50px的位置结束,高度为50px,
右为100px,左为10px,所以盒子的位置从左侧10px开始,右至100结束,宽度也就是90px,。
好了,现在我们让他动起来,加上animation,并在不同的节点添加裁切属性,效果如下:
html 代码
通过背景颜色,我们能够看出来裁切的运动轨迹,这时,这个效果已经大致出来了,去掉背景颜色,就是单边的移动线条了。
html 代码
第二条线条也是类似,通过after来制作,唯一不同的就是clip裁切的位置不一样,多试验试验,也就明白了。
总的来说,就是用clip属性对before和after编写的盒子进行裁切,用通过animation动画来让他运动起来,形成这种流动的效果。不得不说,css真是太神奇了。
现在我也会制作看起来很炫酷的动态效果啦!
评论 ( 16 )
最新评论