HTML+CSS实现页面加载（loading）动画效果

互联网 18-10-16

大家在浏览页面时有没有遇到页面正在loading（加载）的情况，那作为一个前端开发人员，你知道如何用CSS3和HTML制作页面加载动画效果吗？这篇文章就和大家分享一个超级简单实用的CSS3 圆圈加载（loading）动画效果的代码，有一定的参考价值，感兴趣的朋友可以看看。

想要实现loading加载动画需要用到很多CSS3中的属性和HTML标签，比如：animation动画，display，border-radius圆角，transform属性等等，如有不清楚的小伙伴可以看看我以前的文章，之前都有介绍过，或者访问 CSS3视频教程。

实例示范：用三个圆圈制作一个页面加载动画效果，圆圈由隐藏变为出现再变为隐藏，具体代码如下：

HTML部分：

<div class="spinner">      <div class="bounce1"></div>     <div class="bounce2"></div>      <div class="bounce3"></div> </div>

CSS3部分：

.spinner {      margin: 100px auto 0;      width: 150px;      text-align: center;    }         .spinner > div {      width: 30px;      height: 30px;      background-color: #67CF22;           border-radius: 100%;      display: inline-block;      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;      animation: bouncedelay 1.4s infinite ease-in-out;      /* Prevent first frame from flickering when animation starts */      -webkit-animation-fill-mode: both;      animation-fill-mode: both;    }         .spinner .bounce1 {      -webkit-animation-delay: -0.32s;      animation-delay: -0.32s;    }         .spinner .bounce2 {      -webkit-animation-delay: -0.16s;      animation-delay: -0.16s;    }         @-webkit-keyframes bouncedelay {      0%, 80%, 100% { -webkit-transform: scale(0.0) }      40% { -webkit-transform: scale(1.0) }    }         @keyframes bouncedelay {      0%, 80%, 100% {        transform: scale(0.0);        -webkit-transform: scale(0.0);      } 40% {        transform: scale(1.0);        -webkit-transform: scale(1.0);      }    }

效果如图所示：