1.今天上午,去了大学城图书馆,拿了一本《大唐李白》,还没看两页就犯困了。也是醉了。。。。
看来还是喜欢玩点带有交互性的电脑。
2.HTML
<div class="loading-container">
<div class="ball-container">
<div class="ball-one">
</div>
<div class="ball-two">
</div>
<div class="ball-three">
</div>
</div>
<div class="loading-description">
加载中...
</div>
</div>
2.CSS
body{
font-family:"Microsoft YaHei";
}
.grid{
background-image:-webkit-linear-gradient(top,
transparent 49px,
#bfbebe 50px),
-webkit-linear-gradient(left,
transparent 49px,
#bfbebe 50px);
background-size:50px 50px;
background-repeat:repeat; /*先画个网格,便于布局*/
}
/*loading-container*/
.loading-container{
position:absolute;
margin-top:100px;
margin-left:100px;
}
.ball-container::after{
content:"";
display:block;
clear:both;
}
.ball-container div{
position:relative;
width:15px;
height:15px;
background-color:grey;
float:left;
border-radius:50%;
margin-right:20px;
}
.ball-one{
-webkit-animation-name:ball-animation;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count: infinite;
}
.ball-two{
-webkit-animation-name:ball-animation;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay:0.25s;
}
.ball-three{
-webkit-animation-name:ball-animation;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay:0.5s;
}
/*加载描述信息*/
.loading-description{
font-size:14px;
text-align:left;
padding-left:14px;
color:grey;
}
@-webkit-keyframes ball-animation{
0% {-webkit-transform:scale(0);opacity:0}
75% {-webkit-transform:scale(1);opacity:1}
}