.spinner{
width:10em;
height:10em;
margin:100px auto;
border:1.1em solid #666;
border-left-color:#fff;
border-radius:50%;
-webkit-animation:lood 1.1s infinite linear;
}
@-webkit-keyframes lood{
from{ transform:rotate(0deg);}
to{ transform:rotate(360deg);}
}
width:10em;
height:10em;
margin:100px auto;
border:1.1em solid #666;
border-left-color:#fff;
border-radius:50%;
-webkit-animation:lood 1.1s infinite linear;
}
@-webkit-keyframes lood{
from{ transform:rotate(0deg);}
to{ transform:rotate(360deg);}
}
2016-06-29
.spinner .line2{
-webkit-animation-delay:-1.1s;}
......省略
.spinner .line5{
-webkit-animation-delay:-0.8s;}
@-webkit-keyframes strechdelay{
0%,40%,100%{
-webkit-transform:scaleY(0.4);
}
20%{
-webkit-transform:scaleY(1);}
}
-webkit-animation-delay:-1.1s;}
......省略
.spinner .line5{
-webkit-animation-delay:-0.8s;}
@-webkit-keyframes strechdelay{
0%,40%,100%{
-webkit-transform:scaleY(0.4);
}
20%{
-webkit-transform:scaleY(1);}
}
2016-06-29
.spinner{
width:50px;
height:50px;
margin:100px auto;
}
.spinner > div{
display:inline-block;
float:left;
margin:0 2px;
width:6px;
height:100%;
background:green;
-webkit-animation:strechdelay 1.2s infinite ease-in-out;
}
默默走过!
width:50px;
height:50px;
margin:100px auto;
}
.spinner > div{
display:inline-block;
float:left;
margin:0 2px;
width:6px;
height:100%;
background:green;
-webkit-animation:strechdelay 1.2s infinite ease-in-out;
}
默默走过!
2016-06-29
-webkit-animation:fadeOut 1.0s infinite ease-in-out;
@-webkit-keyframes fadeOut{
from{-webkit-transform:scale(0,0);}
to{-webkit-transform:scale(1,1); opacity:0;}
}
纠正一下,这个可以运行
@-webkit-keyframes fadeOut{
from{-webkit-transform:scale(0,0);}
to{-webkit-transform:scale(1,1); opacity:0;}
}
纠正一下,这个可以运行
2016-06-29
-webkit-animation:fadeOut 1.0s infinite ease-in-out;
}
@-webkit-keyfromes fadeOut{
from{-webkit-transform:scale(0,0);}
to{-webkit-transform:scale(1,0); opacity:0;}
}
怎么不行啊?闪都不闪
}
@-webkit-keyfromes fadeOut{
from{-webkit-transform:scale(0,0);}
to{-webkit-transform:scale(1,0); opacity:0;}
}
怎么不行啊?闪都不闪
2016-06-29