css3实现页面加载过度动画

王思彤
2018-03-16 17:17:38
HTML
动画效果

首先需要在body加上如下: 在即将离开当前页面(刷新或关闭)时执行 JavaScript

<style>
    .loading{
       width: 80px;
       height: 40px;
       margin: 0 auto;
       margin-top:500px;
    }
    .loading span{
       display: inline-block;
       width: 8px;
       height: 100%;
       border-radius: 4px;
       background: lightgreen;
       -webkit-animation: load 1.04s ease infinite;
    }
    @-webkit-keyframes load{
       0%,100%{
          height: 40px;
          background: lightgreen;
       }
       50%{
          height: 60px;
          margin-top: -20px;
          background: lightblue;
       }
    }
    .loading span:nth-child(2){
       -webkit-animation-delay:0.13s;
    }
    .loading span:nth-child(3){
       -webkit-animation-delay:0.26s;
    }
    .loading span:nth-child(4){
       -webkit-animation-delay:0.39s;
    }
    .loading span:nth-child(5){
       -webkit-animation-delay:0.52s;
    }
</style>
<body onbeforeunload="return before()">

<div id="fugai" style="display: none; width: 100vw;min-height: 19999px; background: black; opacity: 0.5;position: fixed;top: 0px;z-index: 100;">
   <div class="main">
      <div class="loading">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
      </div>
   </div>
</div>
</body>
<script>
    function before() {
        $('#fugai').show();
    }
    $(document).ready(function(){
        $('#fugai').hide();
    });
</script>

本文为王思彤原创文章,转载无需和我联系,但请注明来自王思彤博客wangsitong.com