.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);} }