CSS3 动画Loading效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3 动画Loading效果

分类

CSS3

描述