tofacebook.com -专业IT技术社区 【百家号】脸书百科,css3实现不同的loading Web程序 - tofacebook.com-专业IT技术社区
70°

【百家号】脸书百科,css3实现不同的loading Web程序

标签:out   init   har   line   loading   ase   absolute   ott   ddl   

 

样式1:

技术分享图片

<html>
<head>
    <style type="text/css">
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -6px;
            margin-left: -30px;
        }

        .loading i {
            display: inline-block;
            float: left;
            width: 12px;
            height: 12px;
            border-radius: 12px;
            background-color: #999;
            margin: 0 4px;
            opacity: .1;
            -webkit-animation: flashPop .6s linear alternate infinite both;
            animation: flashPop .6s linear alternate infinite both;
        }

        .loading i:nth-of-type(2) {
            -webkit-animation-delay: .2s;
            animation-delay: .2s
        }

        .loading i:last-child {
            -webkit-animation-delay: .4s;
            animation-delay: .4s
        }

        @-webkit-keyframes flashPop {
            0% {
                opacity: 1
            }

            33% {
                opacity: .5
            }

            66% {
                opacity: .1
            }
        }

        @keyframes flashPop {
            0% {
                opacity: 1
            }

            33% {
                opacity: .5
            }

            66% {
                opacity: .1
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>
</html>

  

样式2:

技术分享图片

<html>

<head>
    <style type="text/css">
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -6px;
            margin-left: -30px;
        }

        .loading>i {
            float: left;
            width: 12px;
            height: 12px;
            border-radius: 12px;
            background-color: #999;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            margin: 4px;
        }

        .loading .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .loading .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes bouncedelay {
            0%,
            80%,
            100% {
                -webkit-transform: scale(0.0);
            }

            40% {
                -webkit-transform: scale(1.0);
            }
        }

        @keyframes bouncedelay {
            0%,
            80%,
            100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }

            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <i class="bounce1"></i>
        <i class="bounce2"></i>
        <i class="bounce3"></i>
    </div>
</body>

</html>

 

 样式3:

技术分享图片

<html>

<head>
    <style type="text/css">
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -6px;
            margin-left: -30px;
        }

        .circle {
            -webkit-animation: cui-loading 1.58s linear infinite;
            animation: cui-loading 1.58s linear infinite;
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            opacity: 0;
            width: 19px;
            height: 19px;
            border-left: #c5c5c5 1px solid;
            display: block;
            border-bottom: #c5c5c5 1px solid;
            border-radius: 50%;
        }

        @-webkit-keyframes cui-loading {
            0% {
                opacity: 1;
                -webkit-transform: rotate(0deg)
            }

            100% {
                opacity: 1;
                -webkit-transform: rotate(360deg)
            }
        }

        @-moz-keyframes cui-loading {
            0% {
                opacity: 1;
                -moz-transform: rotate(0deg)
            }

            100% {
                opacity: 1;
                -moz-transform: rotate(360deg)
            }
        }

        @-ms-keyframes cui-loading {
            0% {
                opacity: 1;
                -ms-transform: rotate(0deg)
            }

            100% {
                opacity: 1;
                -ms-transform: rotate(360deg)
            }
        }

        @keyframes cui-loading {
            0% {
                opacity: 1;
                transform: rotate(0deg)
            }

            100% {
                opacity: 1;
                transform: rotate(360deg)
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <span class="circle"></span>
    </div>
</body>

</html>

  

 样式4:

 

技术分享图片

<html>

<head>
    <style type="text/css">
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -6px;
            margin-left: -30px;
            width: 2em;
            height: 2em;
            color: inherit;
            vertical-align: middle;
            border: .3em solid #ffffff;
            border-top-color: #9C27B0;
            border-radius: 50%;
            -webkit-animation: 1s flashPop linear infinite;
            animation: 1s flashPop linear infinite;
        }

        .loading:before {
            content: ‘‘;
            display: block;
            width: inherit;
            height: inherit;
            position: absolute;
            top: -.3em;
            left: -.3em;
            border: .3em solid #9C27B0;
            border-radius: 50%;
            opacity: .5;
        }

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

        @keyframes flashPop {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="loading">
    </div>
</body>

</html>

  

技术分享图片

css3实现不同的loading

标签:out   init   har   line   loading   ase   absolute   ott   ddl   

原文地址:https://www.cnblogs.com/panyujun/p/9361790.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: