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

  • 相关阅读:
    python中的os
    文件系统的简单操作
    文件与目录管理
    用户与用户组管理
    基础命令的操作
    linux开机流程
    ansible源码安装、普通用户实现批量控制
    python3中得数据类型
    判断一个字符串中得大写字母,小写字母,数字出现得次数
    Elasticsearch 如何安全加固
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4563597.html
Copyright © 2011-2022 走看看