web前端入门到实战：超酷的 CSS3 loading 预加载动画特效

给大家介绍一款超酷CSS3 loading预加载动画特效。

该loading特效共有4种不同的效果，分别通过不同的CSS3 keyframes帧动画来完成。

HTML结构

4种loading预加载动画的HTML结构分别如下：

<!-- 效果一 -->
<div class="spinner-box">
  <div class="circle-border">
    <div class="circle-core"></div>
  </div>  
</div>
 
<!-- 效果二 -->
<div class="spinner-box">
  <div class="configure-border-1">  
    <div class="configure-core"></div>
  </div>  
  <div class="configure-border-2">
    <div class="configure-core"></div>
  </div> 
</div>
 
<!-- 效果三 -->
<div class="spinner-box">
  <div class="pulse-container">  
    <div class="pulse-bubble pulse-bubble-1">