loading-css

最新推荐文章于 2024-02-03 19:53:33 发布

liugang0605

最新推荐文章于 2024-02-03 19:53:33 发布

阅读量200

点赞数

分类专栏：动画

本文链接：https://blog.csdn.net/power8988/article/details/78287537

版权

动画专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果如下：
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定时器的进度条</title>
    <style>
        .loading {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            z-index: 100;
            background: #fff;
        }

        .loading .pic {
            width: 50px;
            height: 60px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .loading .pic i{
            display: block;
            float:left;
            width:6px;
            height:50px;
            background:#399;
            margin:0 2px;
            transform:scaleY(0.4);
            animation:load 1.2s infinite;

        }
        .loading .pic i:nth-child(2){
            animation-delay:0.1s;
        }
        .loading .pic i:nth-child(3){
            animation-delay:0.2s;
        }
        .loading .pic i:nth-child(4){
            animation-delay:0.3s;
        }
        .loading .pic i:nth-child(5){
            animation-delay:0.4s;
        }
        @keyframes load{
            0%,40%,100%{
                transform:scaleY(0.4)
            }
            20%{
                transform:scaleY(1)
            }
        }
    </style>
</head>
<body>
<div class="loading">
    <div class="pic">
        <i></i><i></i><i></i><i></i><i></i>
</div></div>
</body>
</html>

其他问题：

兼容性

通过网址：

http://autoprefixer.github.io

.loading {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            z-index: 100;
            background: #fff;
        }

        .loading .pic {
            width: 50px;
            height: 60px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .loading .pic i{
            display: block;
            float:left;
            width:6px;
            height:50px;
            background:#399;
            margin:0 2px;
            -webkit-transform:scaleY(0.4);
                -ms-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)
            }
        }

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定时器的进度条</title>
    <style>
        .loading {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            z-index: 100;
            background: #fff;
        }

        .loading .pic {
            width: 50px;
            height: 60px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .loading .pic i{
            display: block;
            float:left;
            width:6px;
            height:50px;
            background:#399;
            margin:0 2px;
            -webkit-transform:scaleY(0.4);
            -ms-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%{
                opacity:0.7;
                -webkit-transform:scaleY(0.4);
                transform:scaleY(0.4)
            }
            20%{
                opacity:1;
                -webkit-transform:scaleY(1);
                transform:scaleY(1)
            }
        }
        @keyframes load{
            0%,40%,100%{
                opacity:0.7;
                -webkit-transform:scaleY(0.4);
                transform:scaleY(0.4)
            }
            20%{
                opacity:1;
                -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>




</script>
</body>
</html>