demo:http://jsbin.com/hacadobo/1/edit
code:https://gist.github.com/hoosin/ff27ca3e1c0926c0054b
<div class="loading-msg">
数据加载中请稍后
<div class="loading-box">
<div class="loading" index="0"></div>
<div class="loading" index="1"></div>
<div class="loading" index="2"></div>
<div class="loading" index="3"></div>
<div class="loading" index="4"></div>
</div>
</div>
.loading-msg{color: red; font:normal 24px/50px "Microsoft YaHei"; text-align: center; background: #fff; width: 1000px; margin: 0 auto; }
.loading-box{position:relative; padding: 10px 5px 30px 5px; }
@keyframes loading {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-webkit-keyframes loading {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes loading {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes loading {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
.loading {
width: 5px;
height: 5px;
background: red;
position: absolute;
opacity: 0;
animation: loading 2s;
-moz-animation: loading 2s;
-webkit-animation: loading 2s;
-o-animation: loading 2s;
animation-timing-function: cubic-bezier(0.1, 0.48, 0.9, 0.52);
-webkit-animation-timing-function: cubic-bezier(0.1, 0.48, 0.9, 0.52);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.loading[index="0"] {
animation-delay: 0.15s;
-webkit-animation-delay: 0.15s;
}
.loading[index="1"] {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.loading[index="2"] {
animation-delay: 0.45s;
-webkit-animation-delay: 0.45s;
}
.loading[index="3"] {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.loading[index="4"] {
animation-delay: 0.75s;
-webkit-animation-delay: 0.75s;
}
扫码关注w3ctech微信公众号
哈哈,分类错了。
你能把代码贴过来,在加一个链接地址吗?
这样更直接,怕到时候git打不开。
真牛逼
= =给文件名加后缀吧,不然连个高亮都没有
好东西..能用上.
.loading-box加一个overflow:hidden比较好,不然色块移出屏幕时滚动条会闪烁。
共收到5条回复