IM12345_Web/WebChartBigN.../css/animation.css

.step1_bj {
    background-image: url(../img/step1_bj.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1510px;
    width: 240px;
    left: 800px;  
	top: 310px;
    z-index: 999999;
}
.step2_bj {
    background-image: url(../img/step2_bj.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1012px;
    width: 232px;
    left: 2780px;  
	top: 650px;
}
.step3_bj {
    background-image: url(../img/step3_bj.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1012px;
    width: 235px;
    left: 4730px;  
	top: 650px;
    z-index: 3333;
}
.step4_bj {
    background-image: url(../img/step4_bj.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1530px;
    width: 220px;
    left: 6580px;  
	top: 310px;
    z-index: 999999;
}
.step1_line {
    background-image: url(../img/step1_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1510px;
    width: 240px;
    animation: step2_line 2s linear infinite;
    z-index: 999999;
}
.step2_line {
    background-image: url(../img/step2_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1012px;
    width: 232px;
    animation: step3_line_l 2s linear infinite;
}
.step3_line {
    background-image: url(../img/step3_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1012px;
    width: 235px;
    animation: step3_line_l 2s linear infinite;
    z-index: 3333;
}
.step4_line {
    background-image: url(../img/step4_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    height: 1530px;
    width: 220px;
    left: 4730px;  
	top: 650px;
    animation: step4_line_l 2s linear infinite;
    z-index: 999999;
}
.posi_line1{
	left: 800px;  
	top: 310px;
	animation: step2_line 2s linear 0s infinite;
	}
.posi_line2{
	left: 2780px;  
	top: 650px;
	animation: step3_line_l 2s linear 4s infinite;
}
.posi_line3{
	left: 4730px;  
	top: 650px;
	animation: step3_line_l 2s linear 6s infinite;
}
.posi_line4{	
	left: 6580px;  
	top: 310px;
	animation: step4_line_l 2s linear 8s infinite;
}
@keyframes step2_line {
	0% { clip: rect(1540px, 240px, 1540px, 0px); }
	50% { clip: rect(0px, 240px, 1540px, 0px); }
	100% { clip: rect(0px, 240px, 0px, 0px); }
}
@keyframes step3_line_l {
	0% { clip: rect(0px, 0px, 1012px, 0px); }
	50% { clip: rect(0px, 235px, 1012px, 0px); }
	100% { clip: rect(0px, 235px, 1012px, 235px); }
}
@keyframes step4_line_l {
	0% { clip: rect(0px, 1540px, 0px, 0px); }
	50% { clip: rect(0px, 235px, 1540px, 0px); }
	100% { clip: rect(1540px, 235px, 1540px, 0px); }
}



/*边框*/
/*动画1*/
.imaxeventani_1::before,
.imaxeventani_1::after {
	content: '';
	position:absolute;
	width:684px;
	height:229px;
	z-index: 0;
	left:34px;
	top:34px;
	box-shadow: inset 0 0 0 1px #00ffff;
	border: 5px solid #0d85ff;
	border-radius:5px;
	animation: imaxeventani_1 2s linear infinite;
	z-index: 22;
}
.imaxeventani_1::after { z-index: 0; animation-delay: -4s;}
@keyframes imaxeventani_1 {
	0%,100% { clip: rect(0px, 684px, 5px, 0px);}
	25% { clip: rect(0px, 684px, 229px, 679px);}
	50% { clip: rect(224px, 684px, 229px, 0px);}
	75% { clip: rect(0px, 5px, 229px, 0px);}
}
/*动画2*/
.imaxeventani_2::before,
.imaxeventani_2::after {
	content: '';
	position:absolute;
	width:324px;
	height:900px;
	z-index: 0;
	left:0px;
	top:0px;
	box-shadow: inset 0 0 0 1px #00ffff;
	border: 5px solid #0d85ff;
	border-radius:5px;
	animation: imaxeventani_2 1s linear infinite;
	z-index: 22;
}
.imaxeventani_2::after { z-index: 0; animation-delay: -4s;}
@keyframes imaxeventani_2 {
	0%,100% { clip: rect(0px, 324px, 5px, 0px);}
	25% { clip: rect(0px, 324px, 900px, 319px);}
	50% { clip: rect(895px, 324px, 900px, 0px);}
	75% { clip: rect(0px, 5px, 900px, 0px);}
}