身份证上传扫描特效
Sonder
2020-10-26
2210字
6分钟
浏览 (2.5k)
代码:
<html>
<head>
<meta charset="utf-8">
<title>1</title>
</head>
<style>
.layout {
overflow-x: hidden;
overflow-y: auto;
width: 750px;
position: relative;
margin: auto;
}
.main {
position: relative;
}
.image_banner {
font-size: 0;
background: #0a0a0a;
position: relative;
}
.image_banner .loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.image_banner .loading .radar {
position: relative;
width: 100%;
height: 80%;
background: linear-gradient(rgba(30, 180, 240, 0), rgba(30, 180, 240, .8) 70%, rgba(30, 180, 240, 0));
animation: myScan 1.2s infinite;
-webkit-animation: myScan 1.2s infinite;
}
.image_banner .loading .grid {
position: absolute;
background: url(https://i.loli.net/2020/10/26/jb5sTHJ6MRFN1C4.png);
background-size: 16px 16px;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@keyframes myScan {
0% {
top: -80%;
}
100% {
top: 80%;
}
}
</style>
<body>
<div class="layout">
<div class="main">
<div class="image_banner">
<img data-v-2b52a663=""
src="https://i.loli.net/2020/10/26/ioLIfu81nsheSvl.png"
style="width: 750px; height: 496px;">
<div class="loading" style="">
<div class="radar"></div>
<div class="grid"></div>
</div>
<div class="popup_wrapper"
style="margin-top: 525px; width: 750px; display: none;">
<div class="popup_content"></div>
</div>
</div>
</div>
</div>
</body>
</html>效果：
