.flow-border {
  animation: borderFlow 2s infinite;
}
@keyframes borderFlow {
  0% { box-shadow: 0 0 5px #ff0000; }
  50% { box-shadow: 0 0 20px #ff0000; }
  100% { box-shadow: 0 0 5px #ff0000; }
}


/*========================*/
.box {
border: 3px solid #fff;
border-radius: 10px;
background-color: #000;animation: border-glow 1s ease-out infinite alternate;
}
.box:hover {

}
@keyframes border-glow {
0% {
border-color: #fff;
box-shadow: 0 0 10px #fff;
}
100% {
border-color: #f00;
box-shadow: 0 0 20px #f00;
}
}



/*========================*/

.fly_border {

			border: 1px solid #0082cc;
			/* 宽高和相对定位是一定要给的,因为这会影响.animate-border子元素的定位 */
			position: relative;
			width: 100%;
			height:  ;
			overflow: hidden;
			padding:11px
		}

		.fly_border::before {
			content: " ";
			position: absolute;
			width: 1px;			
			height: 100%;
			top: -100%;
    		left: 0;
			background-image: linear-gradient(
				0deg,
				transparent,
				#03e9f4,
				transparent
			);
			animation: two 4s linear infinite;
		}

		.fly_border::after {
			content: " ";
			position: absolute;
			width: 1px;			
			height: 100%;
			bottom: -100%;
    		right: 0;
			background-image: linear-gradient(
				360deg,
				transparent,
				#03e9f4,
				transparent
			);
			animation: four 4s linear 2s infinite;
		}
		
		.fly_border i {
			position: absolute;
			display: inline-block;
			height: 1px;
			width: 100%;
		}

		.fly_border .bottom {
			bottom: 0;
    		left: -100%;
			background-image: linear-gradient(
				270deg,
				transparent,
				#03e9f4,
				transparent
			);
			animation: one 4s linear 1s infinite;
		}

		.fly_border .top {
			top: 0;
    		right: -100%;
			background-image: linear-gradient(
				270deg,
				transparent,
				#03e9f4,
				transparent
			);
			animation: three 4s linear 3s infinite;
		}

 


		@keyframes one {
			0% {
				left: -100%;
			}
			50%,
			100% {
				left: 100%;
			}
		}
		
		@keyframes two {
			0% {
				top: -100%;
			}
			50%,
			100% {
				top: 100%;
			}
		}
		
		@keyframes three {
			0% {
				right: -100%;
			}
			50%,
			100% {
				right: 100%;
			}
		}
		
		@keyframes four {
			0% {
				bottom: -100%;
			}
			50%,
			100% {
				bottom: 100%;
			}
		}