学习Css实现动态加载
'''
Title
body{
margin:0;
padding:0;
background:#37f33b;
}
.transition-loader{
position:absolute;
height:100%;
width:100%;
}
.transition-loader-inner{
transform:translateY(50%);
top:50%;
position:absolute;
color:#FFF;
padding:0 100px;
width:calc(100% -200px);
text-align:center;
}
.transition-loader-innerlabel{
font-size:1em;
padding:1%;
opacity:0;
display:inline-block;
}
/*:after伪元素在元素之后添加内容。*/
.transition-loader-innerlabel:after{
font-family:FontAwesome;
content:'\f111';
}
/*animation：动画名 持续时间 动画的速度曲线 延迟时间 循环次数*/
.transition-loader-innerlabel:nth-child(1) {
animation:loader3s600ms infinite ease-in-out;
}
.transition-loader-innerlabel:nth-child(2) {
animation:loader3s500ms infinite ease-in-out;
}
.transition-loader-innerlabel:nth-child(3) {
animation:loader3s400ms infinite ease-in-out;
}
.transition-loader-innerlabel:nth-child(4) {
animation:loader3s300ms infinite ease-in-out;
}
.transition-loader-innerlabel:nth-child(5) {
animation:loader3s200ms infinite ease-in-out;
}
.transition-loader-innerlabel:nth-child(6) {
animation:loader3s100ms infinite ease-in-out;
}
@keyframesloader{
0%{
opacity:0;
transform:translateX(-300px)scale(1);
}
33%{
opacity:1;
transform:translateX(0px)scale(2);
}
66%{
opacity:1;
transform:translateX(0px)scale(1);
}
100%{
opacity:0;
transform:translateX(300px)scale(2);
}
}
'''
