css3动画实现页面加载等待特效

最新推荐文章于 2023-07-11 11:07:51 发布

dhui147258

最新推荐文章于 2023-07-11 11:07:51 发布

阅读量298

点赞数

原文链接：http://www.cnblogs.com/Millet-23/p/9322349.html

版权

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .loading{
            width:100%;
            height:100%;
            position:fixed;
            top:0;
            left:0;
            z-index:9999;
            background-color:#fff;
        }
        .loading .pic{
            width:50px;
            height:50px;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
        }
        .loading .pic i{
            display:block;
            float:left;
            width:6px;
            height:50px;
            background-color:#399;
            margin:0 2px;
            -webkit-transform:scaleY(0.4);
            transform:scaleY(0.4);
            -webkit-animation:load 1.2s infinite;
            animation:load 1.2s infinite;
        }
        .loading .pic i:nth-child(2){
            -webkit-animation-delay:0.1s;
            animation-delay:0.1s;
        }
        .loading .pic i:nth-child(3){
            -webkit-animation-delay:0.2s;
            animation-delay:0.2s;
        }
        .loading .pic i:nth-child(4){
            -webkit-animation-delay:0.3s;
            animation-delay:0.3s;
        }
        .loading .pic i:nth-child(5){
            -webkit-animation-delay:0.4s;
            animation-delay:0.4s;
        }
        @-webkit-keyframes load{
            0%,40%,100%{
                -webkit-transform:scaleY(0.4);
                transform:scaleY(0.4);
            }
            20%{
                -webkit-transform:scaleY(1);
                transform:scaleY(1)
            }
        }
        @keyframes load{
            0%,40%,100%{
                -webkit-transform:scaleY(0.4);
                transform:scaleY(0.4);
            }
            20%{
                -webkit-transform:scaleY(1);
                transform:scaleY(1)
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <div class="pic">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        document.onreadystatechange=function(){
            if(document.readyState=="complate"){
                $(".loading").fadeOut();
            }
        }
    </script>
</body>

</html>