css制作等待进度条效果

时间：2015-04-07 10:25:27 　来源：免费模板网　作者：风雪　阅读次数　tags进度条

　　一些大型网站在登录或者等等搜索结果出现的时候一般出出现个加载进度条，那么它是怎么实现的呢，下面是一个基于CSS3技术而写的动画Loading效果，以小格子为动画的Loading在交替循环变大，以示网页正在加载中，测试看效果请注意，CSS3目前不支持IE8及以下版本，因此测试请使用火狐或chrome浏览器

代码如下

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 loading效果</title>
        <meta charset="utf-8" />
        <style type="text/css" media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            #loading {
                position: absolute;
                left: 600px;
                top: 147px;
                color: #666;
            }
            #loading span{
                display: block;
                position: absolute;
                top: 32px;
                height: 10px;
                width: 10px;
                border: 1px solid #999;
                background-color: #CCC;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-duration: 2.5s;
            }
            #loading span:nth-of-type(1){
                left: 0;
                -webkit-animation-name: animationloading1;
            }
            #loading span:nth-of-type(2){
                left: 20px;
                -webkit-animation-name: animationloading2;
            }
            #loading span:nth-of-type(3){
                left: 40px;
                -webkit-animation-name: animationloading3;
            }
            #loading span:nth-of-type(4){
                left: 60px;
                -webkit-animation-name: animationloading4;
            }
            #loading span:nth-of-type(5){
                left: 80px;
                -webkit-animation-name: animationloading5;
            }
            @-webkit-keyframes animationloading1{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                20%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
                21%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
            }
            @-webkit-keyframes animationloading2{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                20%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                40%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
                41%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
            }
            @-webkit-keyframes animationloading3{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                40%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                60%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
                61%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
            }
            @-webkit-keyframes animationloading4{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                60%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                80%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
                81%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
            }
            @-webkit-keyframes animationloading5{
                0%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                80%{
                    -webkit-transform: scale(1);
                    background-color: #CCC;
                }
                100%{
                    -webkit-transform: scale(1.5);
                    background-color: #999;
                }
            }
        </style>
    </head>
    <body>
        <div id="loading">
            <h3>正在转入<a href="http://www.baidu.com">CSS3持续一组连贯动画</a> 加载中……请稍候进入百度搜索</h3>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
</html>

上篇：精美css布局虚线边框

下篇：使用css制作月球环绕效果

本文地址：https://www.freemoban.com/bjrm/2015/0407/1249.html

猜你喜欢