你的位置:首页 > 软件开发 > 网页设计 > 16款纯CSS3实现的loading加载动画

16款纯CSS3实现的loading加载动画

发布时间:2015-06-10 00:00:30
分享16款纯CSS3实现的loading加载动画。这是一款实用的可替代GIF格式图片的CSS3加载动画代码。效果图如下:在线预览 源码下载实现的代码。html代码: <div class="grid"> <div ...

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

16款纯CSS3实现的loading加载动画

在线预览    源码下载

实现的代码。

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>

原标题:16款纯CSS3实现的loading加载动画

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。