用微调器覆盖 [英] Overlay with spinner
本文介绍了用微调器覆盖的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个覆盖层,该覆盖层将页面与中间的微调框覆盖在一起.最简单的方法是什么?我只需要担心IE 8及更高版本.
I'm trying to create an overlay that overlays a page with a spinner in the middle. What's the simplest way to accomplish this? I only need to worry about IE 8 and above.
推荐答案
使用css3类"spinner".它更漂亮,而且您不需要.gif
use a css3 class "spinner". It's more beautiful and you don't need .gif
.spinner {
position: absolute;
left: 50%;
top: 50%;
height:60px;
width:60px;
margin:0px auto;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left:6px solid rgba(0,174,239,.15);
border-right:6px solid rgba(0,174,239,.15);
border-bottom:6px solid rgba(0,174,239,.15);
border-top:6px solid rgba(0,174,239,.8);
border-radius:100%;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
示例如下: http://jsbin.com/roqakuxebo/1/edit
您可以在此处找到很多这样的CSS微调器: http://cssload.net/en/spinners/
You can find a lot of css spinners like this here : http://cssload.net/en/spinners/
这篇关于用微调器覆盖的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文