Loading加载效果

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Loading特效</title>
    <style>
        #loadingContainer {
            width: 500px;
            margin: 50px auto;

        }

        #loadingContainer h1 {
            font-size: 26px;
            text-align: center;
            margin-top: 30px;
            background: #efefef;
        }

        /* 菊花状的Loading效果 */

        .sk-fading-circle {
            width: 40px;
            height: 40px;
            position: relative;
            margin: 0 auto;
        }

        .sk-fading-circle .sk-circle {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .sk-fading-circle .sk-circle:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #333;
            border-radius: 100%;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
        }

        .sk-fading-circle .sk-circle2 {
            transform: rotate(30deg);
        }

        .sk-fading-circle .sk-circle3 {
            transform: rotate(60deg);
        }

        .sk-fading-circle .sk-circle4 {
            transform: rotate(90deg);
        }

        .sk-fading-circle .sk-circle5 {
            transform: rotate(120deg);
        }

        .sk-fading-circle .sk-circle6 {
            transform: rotate(150deg);
        }

        .sk-fading-circle .sk-circle7 {
            transform: rotate(180deg);
        }

        .sk-fading-circle .sk-circle8 {
            transform: rotate(210deg);
        }

        .sk-fading-circle .sk-circle9 {
            transform: rotate(240deg);
        }

        .sk-fading-circle .sk-circle10 {
            transform: rotate(270deg);
        }

        .sk-fading-circle .sk-circle11 {
            transform: rotate(300deg);
        }

        .sk-fading-circle .sk-circle12 {
            transform: rotate(330deg);
        }

        .sk-fading-circle .sk-circle2:before {
            animation-delay: -1.1s;
        }

        .sk-fading-circle .sk-circle3:before {
            animation-delay: -1s;
        }

        .sk-fading-circle .sk-circle4:before {
            animation-delay: -0.9s;
        }

        .sk-fading-circle .sk-circle5:before {
            animation-delay: -0.8s;
        }

        .sk-fading-circle .sk-circle6:before {
            animation-delay: -0.7s;
        }

        .sk-fading-circle .sk-circle7:before {
            animation-delay: -0.6s;
        }

        .sk-fading-circle .sk-circle8:before {
            animation-delay: -0.5s;
        }

        .sk-fading-circle .sk-circle9:before {
            animation-delay: -0.4s;
        }

        .sk-fading-circle .sk-circle10:before {
            animation-delay: -0.3s;
        }

        .sk-fading-circle .sk-circle11:before {
            animation-delay: -0.2s;
        }

        .sk-fading-circle .sk-circle12:before {
            animation-delay: -0.1s;
        }

        @-webkit-keyframes sk-circleFadeDelay {
            0%,
            39%,
            100% {
                opacity: 0;
            }
            40% {
                opacity: 1;
            }
        }

        /* 琴谱版Loading */

        .spinner {
            height: 40px;
            margin: 0 auto;
            text-align: center
        }

        .spinner>div {
            background-color: #333;
            height: 100%;
            width: 6px;
            display: inline-block;
            animation: sk-stretchdelay 1.2s infinite ease-in-out;
        }

        .spinner .rect2 {
            animation-delay: -1.1s;
        }

        .spinner .rect3 {
            animation-delay: -1.0s;
        }

        .spinner .rect4 {
            animation-delay: -0.9s;
        }

        .spinner .rect5 {
            animation-delay: -0.8s;
        }

        .spinner .rect6 {
            animation-delay: -0.7s;
        }

        @keyframes sk-stretchdelay {
            0%,
            40%,
            100% {
                transform: scaleY(0.4);
            }
            20% {
                transform: scaleY(1.0);
            }
        }

        /* 翻转Loading */

        .rotateSpinner {
            width: 60px;
            height: 60px;
            background-color: #333;
            margin: 0 auto;
            -webkit-animation: rotateplane 1.2s infinite ease-in-out;
            animation: rotateplane 1.2s infinite ease-in-out;
        }

        @-webkit-keyframes rotateplane {
            0% {
                -webkit-transform: perspective(120px)
            }
            50% {
                -webkit-transform: perspective(120px) rotateY(180deg)
            }
            100% {
                -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
            }
        }

        @keyframes rotateplane {
            0% {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
            }
            50% {
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
            }
            100% {
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }

        /* 圆形放大Loading */

        .ballSpinner {
            width: 60px;
            height: 60px;
            margin: 0 auto;
            position: relative;
        }

        .double-bounce1,
        .double-bounce2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #333;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: bounce 2.0s infinite ease-in-out;
            animation: bounce 2.0s infinite ease-in-out;
        }

        .double-bounce2 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        @-webkit-keyframes bounce {
            0%,
            100% {
                -webkit-transform: scale(0.0)
            }
            50% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bounce {
            0%,
            100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            50% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>
</head>

<body>
    <div id="loadingContainer">
        <!-- 菊花状的Loading效果 -->
        <h1>菊花状的Loading效果</h1>
        <div class="sk-fading-circle">
            <div class="sk-circle1 sk-circle"></div>
            <div class="sk-circle2 sk-circle"></div>
            <div class="sk-circle3 sk-circle"></div>
            <div class="sk-circle4 sk-circle"></div>
            <div class="sk-circle5 sk-circle"></div>
            <div class="sk-circle6 sk-circle"></div>
            <div class="sk-circle7 sk-circle"></div>
            <div class="sk-circle8 sk-circle"></div>
            <div class="sk-circle9 sk-circle"></div>
            <div class="sk-circle10 sk-circle"></div>
            <div class="sk-circle11 sk-circle"></div>
            <div class="sk-circle12 sk-circle"></div>
        </div>
        <!-- 琴谱版Loading -->
        <h1>琴谱版Loading</h1>
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4 "></div>
            <div class="rect5"></div>
            <div class="rect6"></div>
        </div>
        <!-- 翻转Loading -->
        <h1>翻转Loading</h1>
        <div class="rotateSpinner"></div>
        <!-- 圆形放大Loading -->
        <h1>圆形放大Loading</h1>
        <div class="ballSpinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>
</body>

</html>

免责声明：

1.本站所提供的全部内容仅限于交流、学习与研究使用，请勿用于非法目的。

2.任何使用本站内容而出现的意外或损失，本站概不负责。

3.本站遵守国家法律法规，禁止制作、复制、发布、传播任何具有反动、色情、暴力、淫秽，政治等内容的信息，一经发现，立即删除，并锁定IP地址移交给公安机关处理。

4.本站的留言、评论与转载内容，仅代表原作者个人观点，与本站观点或立场无关，所有评论、留言均需经过审核后方可正常显示，本站有权删除和过滤违反法律法规的或不正当的言论。

5.本站的文章部分内容可能来源于网络或转载于其他文章，仅供大家学习与参考，如有侵权，请联系站长QQ:1823782755进行删除处理。

6.本站可能会包含第三方网站的链接，点击后或将离开本站并进入其他站点，本站不对其他站点的内容负责。

7.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

8.根据《计算机软件保护条例》第十七条，为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬，本站所有软件资料仅用于学习研究。

9.本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。

10.本站文章采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可，阅读后请勿用于非法用途。

点我去本站旗下导航网

更多知识，请关注微信公众号“51学代码”

文章版权声明 1.本网站名称：51学代码
2.本站永久网址：https://www.51xcode.com
3.本站的部分内容可能来源于网络或转载引用于其他文章，仅供大家学习与参考，如有侵权，请联系站长QQ:1823782755进行删除处理。
4.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5.本站一律禁止以任何方式发布或转载任何违法的相关信息，一经发现，立即删除，并锁定IP地址移交给公安机关处理，访客发现请向站长举报。
6.如需转载文章请标明来源:51学代码 www.51xcode.com

THE END

学习笔记实用教程