星空网 > 软件开发 > 网页设计

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

分享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>

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




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

关键词:CSS

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

Brandless:https://www.ikjzd.com/w/1573153563195383809
品牌营销:https://www.ikjzd.com/w/1573153565762641922
BrandPlus:https://www.ikjzd.com/w/1573153568127885314
Walmart Brand Portal(沃尔玛品牌保护):https://www.ikjzd.com/w/1573153570816434177
品牌备案(Brand Registry):https://www.ikjzd.com/w/1573153573588869121
brewpublic:https://www.ikjzd.com/w/1573153574595846146
价格翻了8倍,居然还有人买,秘诀在这里。:https://www.kjdsnews.com/a/1836642.html
欧洲B2B电商市场有待挖掘!销售总额将达1.7万亿欧元:https://www.kjdsnews.com/a/1836643.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流