css3 --- 实现动画线条运动效果实例集合

 

CSS3实现动画线条运动效果实例集合（一）

 laoyuan 2016-12-20 标签：css3 阅读: 5,157

在我们日常的开发中，有时候有的图片，布局块需要加一下边框运动效果，对于这些效果，我们可以使用CSS3动画属性animation，再配合css的一些技巧制作出来。下面是收藏的一些效果实例。

1、边框流动效果

html：

1. <div class="css3-1">
2. <span>css3效果的内容部分</span>
3. </div>

css:

1. .css3-1{
2. width: 200px;
3. height: 200px;
4. position: relative;
5. }
6. .css3-1::after,.css3-1::before,.css3-1 span{
7. position:absolute;
8. left: 0px;
9. top: 0;
10. bottom: 0;
11. right: 0;
12. }
13. .css3-1 span{
14. background: #eee;
15. line-h