html页面加载蒙版_HTML5+CSS3从入门到精通 CSS3小圆点实现loading加载蒙版

本篇教程探讨了HTML5+CSS3从入门到精通 CSS3小圆点实现loading加载蒙版，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

html>

body{

width: 100%;s

margin: 0 auto;

height: 3000px;

}

.div_load

{

width:15px;

height:15px;

float: ;

position:fixed;

bottom: 52%;

border-radius: 8px;

animation:loading 5s infinite;

-webkit-animation:loading 5s infinite;

}

#div1 {

animation-timing-function:ease;

animation-delay:0s;

-webkit-animation-timing-function:ease;

-webkit-animation-delay:0s;

background:#18bc9a;}

#div2 {

animation-delay:0.22s;

animation-timing-function:ease;

-webkit-animation-timing-function:ease;

-webkit-animation-delay:0.22s;

background:#58d68d}

#div3 {

animation-timing-function:ease;

animation-delay:0.44s;

-webkit-animation-timing-function:ease;

-webkit-animation-delay:0.44s;

background:#3398dc;}

#div4 {

animation-timing-function:ease;

animation-delay:0.66s;

-webkit-animation-timing-function:ease;

-webkit-animation-delay:0.66s;

background:#9b58b7;}

@keyframes loading

{

from {left:25%;}

to {left:75%;}

}

@-webkit-keyframes loading /* Safari and Chrome */

{

from {left:25%;}

to {left:75%;}

}

.ts_load{

display: block;

width: 100%;

height: 100%;

position: fixed;

z-index: 100;

background: rgba(0,0,0,0.3);

bottom: 0;top: 0;left: 0;right: 0;

}

.last_center{

position: absolute;

margin: auto;

}

.load_ts{

display: block;

position: fixed;

text-align: center;

bottom: 46%;

font-size: 16px;

font-family: 微软雅黑;

width: 100%;

color: #ffffff;}

请稍等...

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！