css3直线运动_css3动画--边框线条动画

网上看到一个css3动画，

最开始思路是，里面一个DIV方块，右上角一个同样大小的div1,向上,向右平移8px，设div1的border-top,border-right值形成，如图所示

再用clip截取一半，形成半折角。

同理左下角建一个div,向左、向下平移8px,设border-left,border-bottom值，用clip截取形成

html,body{margin:0;padding:0;background:#101010;

}.cont{width:500px;margin:150px auto;

}.bb{position:relative;width:200px;height:200px;background:#666666;border:1px solid #5EF75E;

}.bb:before{content:" ";display:block;position:absolute;width:200px;height:200px;top:-10px;right:-10px;border-top:2px solid #00FF00;border-right:2px solid #00FF00;z-index:10;box-sizing:border-box;clip:rect(0px,200px,100px,100px);

}.bb:after{content: