zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    opencv中彩色图转换成灰度图rgb2gray
    C和MATLAB中:同时对多个变量连续赋值
    error LNK2019: 无法解析的外部符号
    空间中两直线位置关系
    百度网盘不能绑定QQ
    matlab中双站异面直线法定位目标
    Sublime Text3编辑器简介
    Sybase IQ使用过程中注意事项
    Sybase数据库常用函数
    Sybase数据库第三方软件安装
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4563597.html
Copyright © 2011-2022 走看看