html div边框特效,一种神奇的css3边框特效-原创

*html

*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.