*html

<div class="bannerCode">
<i class="l-t"></i>
<i class="r-t"></i>
<i class="l-b"></i>
<i class="r-b"></i>
<span></span>
</div>

*css

.bannerCode{position: relative;width: 185px;margin:  24px auto 0 ;}
.bannerCode span{display: inline-block;border: 3px solid #cfefff;padding: 8px;width: 163px;height: 163px;background-color: #646464;}
.bannerCode i{width: 17px;height: 17px;display: block;position: absolute;border: solid #2aaced;}
.bannerCode:hover i{animation-duration: 2s;}
.bannerCode .l-t{border-width: 3px 0 0 3px;top: -1px;left: -1px;animation:codeL_t 8s linear infinite;}
.bannerCode .r-t{border-width: 3px 3px 0 0 ;top:-1px;left: 166px;animation:codeR_t 8s linear infinite;}
.bannerCode .l-b{border-width: 0 0 3px 3px;top: 166px;left: -1px;animation:codeL_b 8s linear infinite;}
.bannerCode .r-b{border-width: 0 3px 3px 0;top:166px;right: -1px;animation:codeR_b 8s linear infinite;}




@keyframes codeL_t{
0% {height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
2.5%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
2.6%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 3px 0 0;}
22.5%{height: 0px;width: 34px;left: 149px;top: -1px;border-width: 3px 3px 0 0;}
25%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
27.5%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 3px 3px 0 0;}
27.6%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 0 3px 3px 0;}
47.5%{height: 34px;width: 0px;left: 183px;top:149px;border-width: 0 3px 3px 0;}
50%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
52.5%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 3px 3px 0;}
52.6%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 0 3px 3px;}
72.5%{height: 0px;width: 34px;left: -1px;top:183px;border-width: 0 0 3px 3px;}
75%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
77.5%{height: 34px;width:0px;left: -1px;top:149px;border-width: 0 0 3px 3px;}
77.6%{height: 34px;width:0px;left: -1px;top:149px;border-width: 3px 0 0 3px;}
97.5%{height: 34px;width:0px;left: -1px;top:-1px;border-width: 3px 0 0 3px;}
100%{height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
}
@keyframes codeR_t{
0%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
2.5%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 3px 3px 0 0;}
2.6%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 0 3px 3px 0;}
22.5%{height: 34px;width: 0px;left: 183px;top:149px;border-width: 0 3px 3px 0;}
25%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
27.5%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 3px 3px 0;}
27.6%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 0 3px 3px;}
47.5%{height: 0px;width: 34px;left: -1px;top:183px;border-width: 0 0 3px 3px;}
50%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
52.5%{height: 34px;width:0px;left: -1px;top:149px;border-width: 0 0 3px 3px;}
52.6%{height: 34px;width:0px;left: -1px;top:149px;border-width: 3px 0 0 3px;}
72.5%{height: 34px;width:0px;left: -1px;top:-1px;border-width: 3px 0 0 3px;}
75%{height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
77.5%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
77.6%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 3px 0 0;}
97.5%{height: 0px;width: 34px;left: 149px;top: -1px;border-width: 3px 3px 0 0;}
100%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
}
@keyframes codeL_b{
0%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
2.5%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 3px 3px 0;}
2.6%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 0 3px 3px;}
22.5%{height: 0px;width: 34px;left: -1px;top:183px;border-width: 0 0 3px 3px;}
25%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
27.5%{height: 34px;width:0px;left: -1px;top:149px;border-width: 0 0 3px 3px;}
27.6%{height: 34px;width:0px;left: -1px;top:149px;border-width: 3px 0 0 3px;}
47.5%{height: 34px;width:0px;left: -1px;top:-1px;border-width: 3px 0 0 3px;}
50%{height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
52.5%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
52.6%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 3px 0 0;}
72.5%{height: 0px;width: 34px;left: 149px;top: -1px;border-width: 3px 3px 0 0;}
75%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
77.5%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 3px 3px 0 0;}
77.6%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 0 3px 3px 0;}
97.5%{height: 34px;width: 0px;left: 183px;top:149px;border-width: 0 3px 3px 0;}
100%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
}
@keyframes codeR_b{
0%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
2.5%{height: 34px;width:0px;left: -1px;top:149px;border-width: 0 0 3px 3px;}
2.6%{height: 34px;width:0px;left: -1px;top:149px;border-width: 3px 0 0 3px;}
22.5%{height: 34px;width:0px;left: -1px;top:-1px;border-width: 3px 0 0 3px;}
25%{height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
27.5%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
27.6%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 3px 0 0;}
47.5%{height: 0px;width: 34px;left: 149px;top: -1px;border-width: 3px 3px 0 0;}
50%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
52.5%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 3px 3px 0 0;}
52.6%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 0 3px 3px 0;}
72.5%{height: 34px;width: 0px;left: 183px;top:149px;border-width: 0 3px 3px 0;}
75%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
77.5%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 3px 3px 0;}
77.6%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 0 3px 3px;}
97.5%{height: 0px;width: 34px;left: -1px;top:183px;border-width: 0 0 3px 3px;}
100%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
}






@-webkit-keyframes codeL_t{
0% {height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
2.5%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
2.6%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 3px 0 0;}
22.5%{height: 0px;width: 34px;left: 149px;top: -1px;border-width: 3px 3px 0 0;}
25%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
27.5%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 3px 3px 0 0;}
27.6%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 0 3px 3px 0;}
47.5%{height: 34px;width: 0px;left: 183px;top:149px;border-width: 0 3px 3px 0;}
50%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
52.5%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 3px 3px 0;}
52.6%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 0 3px 3px;}
72.5%{height: 0px;width: 34px;left: -1px;top:183px;border-width: 0 0 3px 3px;}
75%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
77.5%{height: 34px;width:0px;left: -1px;top:149px;border-width: 0 0 3px 3px;}
77.6%{height: 34px;width:0px;left: -1px;top:149px;border-width: 3px 0 0 3px;}
97.5%{height: 34px;width:0px;left: -1px;top:-1px;border-width: 3px 0 0 3px;}
100%{height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
}
@-webkit-keyframes codeR_t{
0%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
2.5%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 3px 3px 0 0;}
2.6%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 0 3px 3px 0;}
22.5%{height: 34px;width: 0px;left: 183px;top:149px;border-width: 0 3px 3px 0;}
25%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
27.5%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 3px 3px 0;}
27.6%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 0 3px 3px;}
47.5%{height: 0px;width: 34px;left: -1px;top:183px;border-width: 0 0 3px 3px;}
50%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
52.5%{height: 34px;width:0px;left: -1px;top:149px;border-width: 0 0 3px 3px;}
52.6%{height: 34px;width:0px;left: -1px;top:149px;border-width: 3px 0 0 3px;}
72.5%{height: 34px;width:0px;left: -1px;top:-1px;border-width: 3px 0 0 3px;}
75%{height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
77.5%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
77.6%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 3px 0 0;}
97.5%{height: 0px;width: 34px;left: 149px;top: -1px;border-width: 3px 3px 0 0;}
100%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
}
@-webkit-keyframes codeL_b{
0%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
2.5%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 3px 3px 0;}
2.6%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 0 3px 3px;}
22.5%{height: 0px;width: 34px;left: -1px;top:183px;border-width: 0 0 3px 3px;}
25%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
27.5%{height: 34px;width:0px;left: -1px;top:149px;border-width: 0 0 3px 3px;}
27.6%{height: 34px;width:0px;left: -1px;top:149px;border-width: 3px 0 0 3px;}
47.5%{height: 34px;width:0px;left: -1px;top:-1px;border-width: 3px 0 0 3px;}
50%{height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
52.5%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
52.6%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 3px 0 0;}
72.5%{height: 0px;width: 34px;left: 149px;top: -1px;border-width: 3px 3px 0 0;}
75%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
77.5%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 3px 3px 0 0;}
77.6%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 0 3px 3px 0;}
97.5%{height: 34px;width: 0px;left: 183px;top:149px;border-width: 0 3px 3px 0;}
100%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
}
@-webkit-keyframes codeR_b{
0%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
2.5%{height: 34px;width:0px;left: -1px;top:149px;border-width: 0 0 3px 3px;}
2.6%{height: 34px;width:0px;left: -1px;top:149px;border-width: 3px 0 0 3px;}
22.5%{height: 34px;width:0px;left: -1px;top:-1px;border-width: 3px 0 0 3px;}
25%{height: 17px;width: 17px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
27.5%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 0 0 3px;}
27.6%{height: 0px;width: 34px;left: -1px;top: -1px;border-width: 3px 3px 0 0;}
47.5%{height: 0px;width: 34px;left: 149px;top: -1px;border-width: 3px 3px 0 0;}
50%{height: 17px;width: 17px;left: 166px;top:-1px;border-width: 3px 3px 0 0;}
52.5%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 3px 3px 0 0;}
52.6%{height: 34px;width: 0px;left: 183px;top:-1px;border-width: 0 3px 3px 0;}
72.5%{height: 34px;width: 0px;left: 183px;top:149px;border-width: 0 3px 3px 0;}
75%{height: 17px;width: 17px;left: 166px;top:166px;border-width: 0 3px 3px 0;}
77.5%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 3px 3px 0;}
77.6%{height: 0px;width: 34px;left: 149px;top:183px;border-width: 0 0 3px 3px;}
97.5%{height: 0px;width: 34px;left: -1px;top:183px;border-width: 0 0 3px 3px;}
100%{height: 17px;width: 17px;left: -1px;top:166px;border-width: 0 0 3px 3px;}
}