CSS3实现动画线条运动效果实例集合(一)
laoyuan 2016-12-20 标签:css3 阅读: 5,157
在我们日常的开发中,有时候有的图片,布局块需要加一下边框运动效果,对于这些效果,我们可以使用CSS3动画属性animation,再配合css的一些技巧制作出来。下面是收藏的一些效果实例。
1、边框流动效果
html:
- <div class="css3-1">
- <span>css3效果的内容部分</span>
- </div>
css:
- .css3-1{
- width: 200px;
- height: 200px;
- position: relative;
- }
- .css3-1::after,.css3-1::before,.css3-1 span{
- position:absolute;
- left: 0px;
- top: 0;
- bottom: 0;
- right: 0;
- }
- .css3-1 span{
- background: #eee;
- line-height: 200px;</