背景圖片上添加遮罩層，設(shè)置鏤空大小，加上陰影效果實(shí)現(xiàn)。
眨眼.gif
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.mask{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100vh;
border-radius: 50%;
box-shadow: #000 0px 0px 0px 2005px;
z-index: 100;
animation: mask 2s linear infinite forwards;
}
@keyframes mask{
0% {height: 5vh;}
10% {height: 10vh;}
20% { height: 20vh;}
25% { height: 30vh;}
30% { height: 10vh;}
35% { height: 5vh;}
40% {height: 10vh;}
45% {height: 20vh;}
50% {height: 30vh;}
60% {height: 40vh;}
75% {height: 50vh;}
80% {height: 60vh;}
85% {height: 70vh;}
90% {height: 80vh;}
95% {height: 90vh;border-radius: 50%}
100% {height: 100vh;border-radius: 10%;}
}
</style>
</head>
<body>
<img src="./bg.png" style="width: 100%;height:100%;"></img>
<div class="mask"></div>
</body>
</html>
