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

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

1、边框流动效果

html：

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

.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 clipAnimate{
	0% {
		clip:rect(0,200px,2px,0)
	}
	25% {
		clip:rect(0,2px,200px,0)
	}
	50% {
		clip:rect(198px,200px,200px,0)
	}
	75% {
		clip:rect(0,200px,200px,198px)
	}
	100% {
		clip:rect(0,200px,2px,0)
	}
}

在本例子中，
1、我们用到伪元素::after和::before，在使用box-shadow:inset 0 0 0 2px #42b983，制作类似边框的效果。
2、然后使用animation制作动画。一个延迟，那么就有如图类似贪吃蛇跟随走动的效果了。
3、这里最重要的是css的clip属性，关于clip，我们知道，clip为剪裁的意思，clip只能对绝对定位的元素进行剪裁，配合rect可以实现元素的矩形裁剪效果，clip: rect(top right bottom left)，上边-右边-下边-左边的顺序，这里的值相对于原始元素的左上角取值的。关于clip具体详情可以去网上搜索资料。

html:

<a class="css3-4" href="#">
    <b>鼠标hover看效果</b>
    <span class="left"></span>
    <span class="top"></span>
    <span class="right"></span>
    <span class="bottom"></span>
</a>

.css3-4{
    display: block;
    position: relative;
    width: 304px; 
    height: 204px; 
    text-align: center;
    border:2px solid #42b983;
    border-radius: 20px;
    line-height: 200px;
}
.css3-4 span{
    position: absolute; 
    z-index: 111;
    background:#fff;
}
.css3-4 .left{
    left: -2px; 
    top: -2px; 
    width: 22px; 
    height: 208px; 
}
.css3-4 .top{ 
    right: 20px; 
    top: -2px; 
    width: 264px;
    height: 2px;
}
.css3-4 .right{ 
    right: -2px; 
    bottom: -2px;  
    width: 22px; 
    height: 208px;
}
.css3-4 .bottom{
    left: 20px; 
    top: 204px; 
    width: 264px; 
    height: 2px;
}
 .css3-4:hover .bottom{
    animation:animateBottom 0.2s linear 0s;
    animation-fill-mode:forwards;
}
.css3-4:hover .left{
    animation:animateLeft 0.2s linear 0.2s;
    animation-fill-mode:forwards;
}
.css3-4:hover .top{
    animation:animateTop 0.2s linear 0.4s;
    animation-fill-mode:forwards;
}
.css3-4:hover .right{
    animation:animateRight 0.2s linear 0.6s;
    animation-fill-mode:forwards;
}

@keyframes animateLeft{
    form{
        height:204px;
    }
    to{
       height:0;
    }
}
@keyframes animateTop{
    form{
        width:264px;
    }
    to{
       width:0;
    }
}
@keyframes animateRight{
    form{
        height:204px;
    }
    to{
       height:0;
    }
}
@keyframes animateBottom{
    form{
        width:264px;
    }
    to{
       width:0;
    }
}

本例子中我们主要做法是开始给一个div设置一个边框，然后用四个span分别定位在这四个边上覆盖掉边框。暂时让边框隐藏掉，然后使用animation开始从bottom-left-top-right开始做连续动画效果，这样给覆盖的边框就如上面的效果慢慢地显示出来。特别要注意的地方是顶部span(right)和右边span(bottom)的定位样式 。