<!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>
