css3直线运动_CSS3实现动画线条运动效果实例集合（一）

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

1、边框流动效果

html：

css3效果的内容部分

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;

text-align: center;

}

.css3-1::after,.css3-1::before{

content: '';

box-shadow:inset 0 0 0 2px #42b983;

animation:clipAnimate 10s linear infinite;

z-index: 11

}

.css3-1::before{

animation-delay:-5s

}

@keyframes clipA