分享16款纯CSS3实现的loading加载动画。这是一款实用的可替代GIF格式图片的CSS3加载动画代码。效果图如下:在线预览 源码下载实现的代码。html代码: <div class="grid"> <div ...
分享16款纯CSS3实现的loading加载动画。这是一款实用的可替代GIF格式图片的CSS3加载动画代码。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<div class="grid"> <div class="cell"> <div class="card"> <span class="spinner-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="throbber-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="refreshing-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="heartbeat-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="gauge-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="timer-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="three-quarters-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="wobblebar-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="atebits-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="whirly-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="flower-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="dots-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="circles-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="plus-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="ball-loader">Loading…</span> </div> </div> <div class="cell"> <div class="card"> <span class="hexdots-loader">Loading…</span> </div> </div> </div>
原标题:16款纯CSS3实现的loading加载动画
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。