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;

w