html、css、JQuery 实现眨眼睛的动画

html

<div class="main">
        <!-- 眨眼效果-->
        <div class="img-container"></div>
         <div class="content">眨眼过程中、眨眼完毕后可以看到的内容</div>
    </div>

css

 .main {
   width: 100%;
   height: 100vh;
   position: relative;
   overflow: hidden;
   position: relative;
 }

 .main::before {
   content: '';
   display: block;
   width: 100vw;
   height: 1rem;
   background: #000;
   position: absolute;
   left: 0;
   top: 0;
   z-index: 99;
   display: none;
 }

 .main::after {
   content: '';
   display: block;
   width: 100vw;
   height: 1rem;
   background: #000;
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 99;
   display: none;
 }

.img-container {
   position: absolute;
   left: 10%;
   top: calc((100% - 80px) / 2);
   z-index: 1000;
   width: 80%;
   height: 0;
   -webkit-filter: blur(10px);
   -moz-filter: blur(10px);
   -ms-filter: blur(10px);
   filter: blur(10px);
   transform: scale(1.2);
   border-radius: 50%;
   box-shadow: 0 0 0 530px rgba(0, 0, 0, 1);
   -webkit-box-shadow: 0 0 0 530px rgba(0, 0, 0, 1);
 }

js

$(function() {
  blinkAnimation();
  function blinkAnimation() {
        $('.img-container').animate({
            width: '80%',
            height: '0',
            left: '10%',
            top: document.body.clientHeight / 2 + 'px'
        }).animate({
            width: '80%',
            height: '80px',
            left: '10%',
            top: (document.body.clientHeight - 80) / 2 + 'px'
        }).animate({
            width: '80%',
            height: '0',
            left: '10%',
            top: document.body.clientHeight / 2 + 'px'
        }).animate({
            width: '200%',
            height: '100%',
            left: '-50%',
            top: '0',
            opacity: '0'
        }, 500, function () {
            $('.main::before').hide();
            $('.main::after').hide();
            $('.img-container').hide();
            $('.guide-container').css('display', 'flex');
            isDeviceing = true;
        });
        $('.guide-container').click(function () {
            $('.guide-container').hide();
        });
    }
})