1. 用到知识：
CSS:animate ,clipe
2.原理： 用clip 属性 将div 切边 ，会出现 切边的动态效果，然后内部的div 遮住外部的div ,流出一部分 作为边；
就是旋转的效果；
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>边缘线条转圈效果</title>
</head>
<style>
#f1{width:500px;height:500px;position:absolute;background:red;}
@keyframes clips{
0%{
clip:rect(0px 220px 2px 10px)
}
25%{
clip:rect(0px 2px 220px 10px)
}
50%{
clip:rect(218px 220px 210px 10px)
}
70%{
clip:rect(0px 220px 220px 210px)
}
100%{
clip:rect(0px 220px 2px 10px)
}
}
#f1{animation:clips 8s linear infinite
}
</style>
<body>
<div id="f1">
</div>
</body>
</html>
原文：http://www.cnblogs.com/vali/p/5909950.html