Image scanning effect:
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片扫描</title>
<style>
.img-box {
position: relative;
width: 300px;
height: 200px;
margin: 200px auto;
}
.loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
// 横线，网格，渐变背景
background: linear-gradient(#07aaff, #07aaff),
linear-gradient(90deg, #ffffff33 1px, transparent 0),
linear-gradient( #ffffff33 1px, transparent 0),
linear-gradient(transparent, #07aaff);
background-size: 100% 1.5%, 10% 100%, 100% 8%, 100% 100%;
background-repeat: no-repeat, repeat, repeat, no-repeat;
background-position: 0 0, 0 0, 0 0, 0 0;
// 显示部分背景形状
clip-path: polygon(0% 0%, 100% 0%, 100% 1.5%, 0% 1.5%);
// 动画循环
animation: move 1s infinite linear;
}
@keyframes move {
to {
background-position: 0 100%, 0 0, 0 0, 0 0;
// 显示全部背景形状
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}
.img-box img {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="img-box">
<div class="loading"></div>
<img src="./cat1.jpg" alt="">
</div>
</div>
</body>
</html>