zoukankan      html  css  js  c++  java
  • 几种简单页面loading动画

    1、

       <style>
            .loading-content {
                display: flex;
                justify-content: center;
    
            }
            .loading-dot {
                 20px;
                height: 20px;
                background: #8385aa;
                border-radius: 50%;
                margin: 250px 10px;
                animation: bouncing-animate 0.6s infinite alternate;
              
            }
            .loading-dot:nth-child(2) {
                animation-delay: 0.2s;
            }
            .loading-dot:nth-child(3) {
                animation-delay: 0.4s;
            }
    
            @keyframes bouncing-animate {
                to {
                    opacity: 0.1;
                    transform: translate3d(0, -50px, 0);
                }
            }
        </style>
    </head>
    
    <body>
        <div class="loading-content">
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
        </div>
    

    效果如下

    2、

        <style>
            .donut {
                 30px;
                height: 30px;
                border-radius: 50%;
                border: 4px solid rgba(0, 0, 0, 0.1);
                margin: 30px;
                border-left-color: #7983ff;
                animation: donut-spin 1.2s linear infinite;
            }
    
            @keyframes donut-spin {
                0% {
                    transform: rotate(0deg);
                }
    
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    
    <body>
        <div class="donut"></div>
    </body>
    

    效果如下:

    3、

        <style>
            .donut {
                 30px;
                height: 30px;
                border-radius: 50%;
                border: 4px solid rgba(0, 0, 0, 0.1);
                margin: 30px;
                border-left-color: #7983ff;
                animation: donut-spin 1.2s linear infinite;
            }
    
            @keyframes donut-spin {
                0% {
                    transform: rotate(0deg);
                }
    
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    
    <body>
        <div class="donut"></div>
    </body>
    

    效果如下:

    4、

        <style>
            #loading {
                /* background-color: #cf4a30; */
                background-color: #0f0f0f;
                height: 100%;
                 100%;
                position: fixed;
                z-index: 1;
                margin-top: 0px;
                top: 0px;
            }
    
            #loading-center {
                 100%;
                height: 100%;
                position: relative;
            }
    
            #loading-center-absolute {
                position: absolute;
                left: 50%;
                top: 50%;
                height: 60px;
                 60px;
                margin-top: -30px;
                margin-left: -30px;
                -webkit-animation: loading-center-absolute 1s infinite;
                animation: loading-center-absolute 1s infinite;
    
            }
    
            .object {
                 20px;
                height: 20px;
                background-color: #FFF;
                float: left;
                -moz-border-radius: 50% 50% 50% 50%;
                -webkit-border-radius: 50% 50% 50% 50%;
                border-radius: 50% 50% 50% 50%;
                margin-right: 20px;
                margin-bottom: 20px;
            }
    
            .object:nth-child(2n+0) {
                margin-right: 0px;
    
            }
    
            #object_one {
                -webkit-animation: object_one 1s infinite;
                animation: object_one 1s infinite;
            }
    
            #object_two {
                -webkit-animation: object_two 1s infinite;
                animation: object_two 1s infinite;
            }
    
            #object_three {
                -webkit-animation: object_three 1s infinite;
                animation: object_three 1s infinite;
            }
    
            #object_four {
                -webkit-animation: object_four 1s infinite;
                animation: object_four 1s infinite;
            }
    
            @-webkit-keyframes loading-center-absolute {
                100% {
                    -ms-transform: rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
    
            }
    
            @keyframes loading-center-absolute {
                100% {
                    -ms-transform: rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
    
    
    
    
            @-webkit-keyframes object_one {
                50% {
                    -ms-transform: translate(20px, 20px);
                    -webkit-transform: translate(20px, 20px);
                    transform: translate(20px, 20px);
                }
            }
    
            @keyframes object_one {
                50% {
                    -ms-transform: translate(20px, 20px);
                    -webkit-transform: translate(20px, 20px);
                    transform: translate(20px, 20px);
                }
            }
    
    
            @-webkit-keyframes object_two {
                50% {
                    -ms-transform: translate(-20px, 20px);
                    -webkit-transform: translate(-20px, 20px);
                    transform: translate(-20px, 20px);
                }
            }
    
            @keyframes object_two {
                50% {
                    -ms-transform: translate(-20px, 20px);
                    -webkit-transform: translate(-20px, 20px);
                    transform: translate(-20px, 20px);
                }
            }
    
    
    
            @-webkit-keyframes object_three {
                50% {
                    -ms-transform: translate(20px, -20px);
                    -webkit-transform: translate(20px, -20px);
                    transform: translate(20px, -20px);
                }
            }
    
            @keyframes object_three {
                50% {
                    -ms-transform: translate(20px, -20px);
                    -webkit-transform: translate(20px, -20px);
                    transform: translate(20px, -20px);
                }
            }
    
    
    
            @-webkit-keyframes object_four {
                50% {
                    -ms-transform: translate(-20px, -20px);
                    -webkit-transform: translate(-20px, -20px);
                    transform: translate(-20px, -20px);
                }
            }
    
            @keyframes object_four {
                50% {
                    -ms-transform: translate(-20px, -20px);
                    -webkit-transform: translate(-20px, -20px);
                    transform: translate(-20px, -20px);
                }
            }
        </style>
    </head>
    
    <body>
        <div id="loading">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_four"></div>
    
                </div>
            </div>
    
        </div>
    </body>
    

    效果如下:

  • 相关阅读:
    在主窗体中打开一个新子窗体,如果已有子窗体,则激活它,而不打开新的。
    文本的追加
    男人至少的品质底线
    做人,做事,生活,学习,爱情>人生
    日常中一些好用的小软件
    ◆2008 年广告创意设计师必备网址汇总◆
    在SharePoint中更改当前登录用户的密码
    SONY笔记本VGNSZ65装VISTA记
    Outlook收邮件速度超慢的原因
    Cisco路由器做限速
  • 原文地址:https://www.cnblogs.com/Mortallin/p/13575864.html
Copyright © 2011-2022 走看看