html css实现win8,通过CSS3实现win8的Loading效果

数据加载中请稍后

.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微信公众号