直接看代码:
HTML:
<body>
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</body>
CSS:
<style>
.loading {
width:100%;
height:100%;
background: #ffffff;
position: fixed;
top: 0;
left: 0;
}
.loading .pic {
width: 50px;
height: 50px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
}
.loading .pic i {
display: block;
float: left;
width: 6px;
height: 50px;
margin:0 2px;
background: #399;
/*起始状态较小,所以给缩放0.4倍*/
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;/*infinite循环播放*/
}
/*第一个默认不延迟*/
.loading .pic i:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loading .pic i:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading .pic i:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loading .pic i:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
/*定义一个动画*/
@-webkit-keyframes load {
0%,40%,100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes load {
0%,40%,100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
</style>
很简单的一个小demo,代码量不是很多,写完后做一个兼容就OK了,这里推荐一个在线前缀兼容链接https://autoprefixer.github.io/
还是看下效果图吧,但是不知道怎么弄一个动态图,只能放个截图了。。。