有志者事竟成。

css页面加载动画

 

 

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

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <style type="text/css">
            .preloader {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                background: #49a9ee;
                z-index: 9999;
                transition: opacity .65s
            }
            
            .preloader-hidden-add {
                opacity: 1;
                display: block
            }
            
            .preloader-hidden-add-active {
                opacity: 0
            }
            
            .preloader-hidden {
                display: none
            }
            
            .cs-loader {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%
            }
            
            .cs-loader-inner {
                transform: translateY(-50%);
                top: 50%;
                position: absolute;
                width: 100%;
                color: #fff;
                text-align: center
            }
            
            .cs-loader-inner label {
                font-size: 20px;
                opacity: 0;
                display: inline-block
            }
            
            .cs-loader-inner label:nth-child(6) {
                animation: lol 3s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(5) {
                animation: lol 3s .1s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(4) {
                animation: lol 3s .2s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(3) {
                animation: lol 3s .3s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(2) {
                animation: lol 3s .4s infinite ease-in-out
            }
            
            .cs-loader-inner label:nth-child(1) {
                animation: lol 3s .5s infinite ease-in-out
            }
            
            @keyframes lol {
                0% {
                    opacity: 0;
                    transform: translateX(-300px)
                }
                33% {
                    opacity: 1;
                    transform: translateX(0)
                }
                66% {
                    opacity: 1;
                    transform: translateX(0)
                }
                100% {
                    opacity: 0;
                    transform: translateX(300px)
                }
            }
        </style>
    </head>
    <body>
        <div class="preloader">
            <div class="cs-loader">
                <div class="cs-loader-inner">
                    <label>●</label>
                    <label>●</label>
                    <label>●</label>
                    <label>●</label>
                    <label>●</label>
                    <label>●</label>
                </div>
            </div>
        </div>
    </body>
</html>

 

posted on 2019-09-20 10:14  阿长*长  阅读(796)  评论(0)  编辑  收藏  举报

导航