css加载动画（纯css和html）

从jq官网上摘抄下来的一个简单加载动画，个人比较喜欢使用~存在这里，作为记录

 

 

 

话不多说~上代码

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 登陆动画 */

        .loader {
            width: 90px;
            height: 42px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%);
        }


        #logining {
            /* display: none; */
            width: 447px;
            height: 438px;
            /* background-color: rgba(255, 255, 255, 0.3); */
            position: relative;
            top: 0;
            left: 0;
            text-align: center;
            font-size: 24px;
            color: #cccccc;
            background: rgba(4, 49, 75, 0.7);
            overflow: hidden;
        }

        #logining p {
            margin-top: 150px;
        }

        .css-square {
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            height: 7px;
            background: #cccccc;
            box-shadow: 2px 2px 3px 0px black;
        }

        .square1 {
            left: 70px;
            -webkit-animation: dominos 1s 0.125s ease infinite;
            animation: dominos 1s 0.125s ease infinite;
        }

        .square2 {
            left: 60px;
            -webkit-animation: dominos 1s 0.3s ease infinite;
            animation: dominos 1s 0.3s ease infinite;
        }

        .square3 {
            left: 50px;
            -webkit-animation: dominos 1s 0.425s ease infinite;
            animation: dominos 1s 0.425s ease infinite;
        }

        .square4 {
            left: 40px;
            -webkit-animation: dominos 1s 0.540s ease infinite;
            animation: dominos 1s 0.540s ease infinite;
        }

        .square5 {
            left: 30px;
            -webkit-animation: dominos 1s 0.665s ease infinite;
            animation: dominos 1s 0.665s ease infinite;
        }

        .square6 {
            left: 20px;
            -webkit-animation: dominos 1s 0.79s ease infinite;
            animation: dominos 1s 0.79s ease infinite;
        }

        .square7 {
            left: 10px;
            -webkit-animation: dominos 1s 0.9s ease infinite;
            animation: dominos 1s 0.9s ease infinite;
        }

        .square8 {
            left: 0px;
            -webkit-animation: dominos 1s 1s ease infinite;
            animation: dominos 1s 1s ease infinite;
        }




        @-webkit-keyframes loader-1-outter {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

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

        @keyframes loader-1-outter {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

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

        @-webkit-keyframes dominos {
            50% {
                opacity: 0.7;
            }

            75% {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
            }

            80% {
                opacity: 1;
            }
        }

        @keyframes dominos {
            50% {
                opacity: 0.7;
            }

            75% {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
            }

            80% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div id="logining">
        <p>加载中...</p>
        <section>
            <div class="loader ">
                <div class="css-square square1"></div>
                <div class="css-square square2"></div>
                <div class="css-square square3"></div>
                <div class="css-square square4"></div>
                <div class="css-square square5"></div>
                <div class="css-square square6"></div>
                <div class="css-square square7"></div>
                <div class="css-square square8"></div>
            </div>
        </section>
    </div>
</body>

</html>

 

posted @ 2021-01-11 14:10  昶羽  阅读(607)  评论(0)    收藏  举报