CSS3自定义loading效果

最新推荐文章于 2024-02-21 13:28:58 发布

denghous8817

最新推荐文章于 2024-02-21 13:28:58 发布

阅读量200

点赞数

原文链接：http://www.cnblogs.com/qianxuebing/p/9830160.html

版权

效果：

使用CSS3完成loading的制作

css样式:

 <style type="text/css">
        .mask {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.1);
        }
        
        .mask-loading {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .mask-loading div {
            width: 20px;
            height: 20px;
            float: left;
            margin-right: 5px;
            background-color: #0179B5;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
        
        .mask-loading div:nth-child(1) {
            -webkit-animation: loading 0.5s ease 0s infinite alternate;
            animation: loading 0.5s ease 0s infinite alternate;
        }
        
        .mask-loading div:nth-child(2) {
            -webkit-animation: loading 0.5s ease 0.1s infinite alternate;
            animation: loading 0.5s ease 0.1s infinite alternate;
        }
        
        .mask-loading div:nth-child(3) {
            margin-right: 0;
            -webkit-animation: loading 0.5s ease 0.2s infinite alternate;
            animation: loading 0.5s ease 0.2s infinite alternate;
        }
        
        @keyframes loading {
            from {
                /*缩放*/
                transform: scale(1);
                background-color: lightcoral;
            }
            to {
                transform: scale(0.5);
                background-color: #0179B5;
            }
        }
        
        @-webkit-keyframes loading {
            from {
                transform: scale(1);
                background-color: lightcoral;
            }
            to {
                transform: scale(0.5);
                background-color: #0179B5;
            }
        }
        
        @-moz-keyframes loading {
            from {
                transform: scale(1);
                background-color: lightcoral;
            }
            to {
                transform: scale(0.5);
                background-color: #0179B5;
            }
        }
        
        @-o-keyframes loading {
            from {
                transform: scale(1);
                background-color: lightcoral;
            }
            to {
                transform: scale(0.5);
                background-color: #0179B5;
            }
        }
    </style>

HTML:

<body>
    <div class="mask">
        <div class="mask-loading">
            <div></div>
            <div></div>
            <div></div>
            <p>Loading...</p>
        </div>
    </div>
</body>

转载于:https://www.cnblogs.com/qianxuebing/p/9830160.html