基于CSS3技术的动画Loading效果_CSS相关

基于CSS3技术的动画Loading效果: 发布时间：2020-03-20编辑：脚本学堂

基于CSS3技术的动画Loading效果，以小格子为动画的Loading在交替循环变大，以示网页正在加载。不支持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> 加载中……请稍候进入<a href=http://www.baidu.com/ target=_blank class=infotextkey>百度</a>搜索</h3>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
</html>

提示：可修改代码后再运行!

上一篇：使用css3技术仿制JavaScript弹力效果
下一篇：使用CSS3做的遮罩效果

与基于CSS3技术的动画Loading效果有关的文章

本文标题：基于CSS3技术的动画Loading效果
本页链接：http://www.jb200.com/tx/140.html

浏览排行

栏目分类

热点文章

1css实现网站导航之横向导航

基于CSS3技术的动画Loading效果