css实现中间镂空眨眼效果

背景图片上添加遮罩层，设置镂空大小，加上阴影效果实现。

眨眼.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>

css实现中间镂空 眨眼效果

推荐阅读更多精彩内容

css实现中间镂空眨眼效果