CSS3 动画Loading效果

2020-01-27 14:16:33

字体：大中小

来源：转载

供稿：网友

<!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.cuoxin.com">CSS3持续一组连贯动画</a> 加载中……请稍候进入百度搜索</h3>            <span></span>            <span></span>            <span></span>            <span></span>            <span></span>        </div>    </body></html>

上一篇：CSS3太阳系星球效果图

下一篇：css3仿制js的弹力效果