CSS3 動畫Loading效果

2024-09-05 12:17:24

字體：大中小

供稿：網(wǎng)友

一個基于CSS3技術(shù)而寫的動畫Loading效果，以小格子為動畫的Loading在交替循環(huán)變大，以示網(wǎng)頁正在加載中，測試看效果請注意，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   class="iwvjtn8m0"   id="loading">            <h3>正在轉(zhuǎn)入CSS3持續(xù)一組連貫動畫 加載中……請稍候進(jìn)入百度搜索</h3>            <span></span>            <span></span>            <span></span>            <span></span>            <span></span>        </div>    </body></html>

上一篇：css3仿制js的彈力效果

下一篇：CSS3太陽系星球效果圖