css实现十六种loading加载动画集合效果代码-html代码-BFW代码库

css实现十六种loading加载动画集合效果代码

代码语言：html

代码描述：css实现十六种loading加载动画集合效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .cf:before,
        .cf:after {
            content: " ";
            /* 1 */
            display: table;
            /* 2 */
        }

        .cf:after {
            clear: both;
        }

        html {
            color: #fff;
            font-family: 'Source Sans Pro', sans-serif;
            background-color: #59488b;
        }
        h1,h2 {
            color: rgba(255,255,255,0.5);
            font-size: 40px;
            font-weight: 200;
            text-align: center;
            margin: 40px 0 0 0;
        }
        h2 {
            font-size: 18px;
            margin: 0;
            padding: 0;
            margin: 10px 0;
        }
        h1 span {
            font-size: 30px;
        }

        a {
            text-decoration: none;
        }
        a:hover {
            transition: all linear 0.2s;
        }
        ::-moz-selection {
            background: #b3d4fc;
            text-shadow: none;
        }
        ::selection {
            background: #b3d4fc;
            text-shadow: none;
        }


        .wrapper {
            width: 700px;
            margin: 0 auto;
        }
        .row {
            text-align: center;
            padding: 50px 0;
        }
        .span, .span_large {
            float: left;
            width: 100px;
            background-color: rgba(0,0,0, 0.02);
            height: 100px;
            vertical-align: middle;
            border-radius: 1px;
            margin-right: 100px;
        }
        .span:last-child {
            margin-right: 0px;
        }

        /* Timer*/
        .timer {
            width: 24px;
            height: 24px;
            background-color: transparent;
            box-shadow: inset 0px 0px 0px 2px #fff;
            border-radius: 50%;
            position: relative;
            margin: 38px auto;
            /* Not necessary- its only for layouting*/
        }
        .timer:after, .timer:before {
            position: absolute;
            content: "";
            background-color: #fff;
        }
        .timer:after {
            width: 10px;
            height: 2px;
            top: 11px;
            left: 11px;
            -webkit-transform-origin: 1px 1px;
            -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
            -webkit-animation: minhand 2s linear infinite;
            -moz-animation: minhand 2s linear infinite;
            animation: minhand 2s linear infinite;
        }

        .timer:before {
            width: 8px;
            height: 2px;
            top: 11px;
            left: 11px;
            -webkit-transform-origin: 1px 1px;
            -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
            -webkit-animation: hrhand 8s linear infinite;
            -moz-animation: hrhand 8s linear infinite;
            animation: hrhand 8s linear infinite;
        }

@-webkit-keyframes minhand {
            0% {
                -webkit-transform: rotate(0deg)
            }
            100% {
                -webkit-transform: rotate(360deg)
            }
        }
@-moz-keyframes minhand {
            0% {
                -moz-transform: rotate(0deg)
            }
            100% {
                -moz-transform: rotate(360deg)
            }
        }
@keyframes minhand {
            0% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }

@-webkit-keyframes hrhand {
            0% {
                -webkit-transform: rotate(0deg)
            }
            100% {
                -webkit-transform: rotate(360deg)
            }
        }
@-moz-keyframes hrhand {
            0% {
                -moz-transform: rotate(0deg)
            }
            100% {
                -moz-transform: rotate(360deg)
            }
        }
@keyframes hrhand {
            0% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }

        /*Typing Loader*/
        .typing_loader {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            -webkit-animation: typing 1s linear infinite alternate;
            -moz-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
            margin: 46px auto;
            /* Not necessary- its only for layouting*/
            position: relative;
            left: -12px;
        }
@-webkit-keyframes typing {
            0% {
                backgr.........完整代码请登录后点击上方下载按钮下载查看