你的位置:首页 > 网页设计

[网页设计]16款纯CSS3实现的loading加载动画


分享16款纯CSS3实现的loading加载动画。这是一款实用的可替代GIF格式图片的CSS3加载动画代码。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

 <div class="grid">    <div class="cell">      <div class="card">        <span class="spinner-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="throbber-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="refreshing-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="heartbeat-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="gauge-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="timer-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="three-quarters-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="wobblebar-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="atebits-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="whirly-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="flower-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="dots-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="circles-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="plus-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="ball-loader">Loading&#8230;</span>      </div>    </div>    <div class="cell">      <div class="card">        <span class="hexdots-loader">Loading&#8230;</span>      </div>    </div>  </div>

css代码:

    body    {      background: #f3f6f9;      font-family: sans-serif;      font-weight: 100;      font-size: 14px;      margin: 0;      padding: 20px;    }    .grid    {      overflow: hidden;    }    .cell    {      float: left;      width: 25%;      box-sizing: border-box;      padding: 20px;      display: table;    }    .card    {      background: white;      border: 1px solid #c3c6cf;      border-radius: 15px;      display: table-cell;      text-align: center;      vertical-align: middle;      height: 200px;    }  </style>

via:http://www.w2bc.com/Article/42264