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