<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css扫描动画</title><style>* {margin:0;padding:0;box-sizing:border-box;}body {height:100vh;position:relative;}.scan {width:150px;height:150px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);backface-visibility:hidden;}.scan span {position:absolute;left:0;top:0;width:100%;height:20px;background-color:#00bc12;z-index:1;transform:translateY(135%);animation:move 0.7s cubic-bezier(0.15,0.44,0.76,0.64);animation-iteration-count:infinite;}.scan > div {z-index:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;backface-visibility:hidden;}.scan i {display:block;height:1px;background:#b04b4b;margin:0 auto 2px;margin:0 auto 2.2px;backface-visibility:hidden;}.scan i:nth-child(2) {width:75%;}.scan i:nth-child(3) {width:81%;}.scan i:nth-child(4) {width:87%;}.scan i:nth-child(6) {width:71%;}.scan i:nth-child(7) {width:81%;}.scan i:nth-child(8) {width:65%;}.scan i:nth-child(9) {width:83%;}.scan i:nth-child(10) {width:75%;}.scan i:nth-child(12) {width:86%;}.scan i:nth-child(14) {width:65%;}.scan i:nth-child(16) {width:75%;}.scan i:nth-child(18) {width:83%;}.scan:before,.scan:after,.scan em:after,.scan em:before {border-color:#b04b4b;content:"";position:absolute;width:19px;height:16px;border-style:solid;border-width:0px;}.scan:before {left:0;top:0;border-left-width:1px;border-top-width:1px;}.scan:after {right:0;top:0;border-right-width:1px;border-top-width:1px;}.scan em:before {left:0;bottom:0;border-left-width:1px;border-bottom-width:1px;}.scan em:after {right:0;bottom:0;border-right-width:1px;border-bottom-width:1px;}@keyframes move {0%,100% {transform:translateY(270%);}50% {transform:translateY(0%);}75% {transform:translateY(672%);}}</style></head><body><div class="scan"><em></em><div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><span></span></div></body></html>
