加载器CSS工作在Chrome和Safari中，而不是在IE或Firefox中。
加载器CSS工作在Chrome和Safari中，而不是在IE或Firefox中。
提问于 2015-04-16 14:40:26
我在我的网页中使用了这个代码，它在Chrome和Safari中工作得很好，但是在IE和Mozilla中，它是冻结的，不工作的。我怎么才能解决这个问题？
http://codepen.io/jeyachanthuruj/pen/Cihsp
HTML：
<div class="loader">
<div class="spin"></div>
</div>CSS：
.loader{
height:80px;
width:80px;
position:relative;
margin:100px auto;
.spin {
height:80px;
width:80px;
-webkit-animation:myspin 1s ease infinite;
&, &:before {
box-sizing:border-box;
border:5px solid blue;
border-left-color:#3369E8;
border-top-color:#D50F25;
border-right-color:#009925;
border-bottom-color:#EEB211;
border-radius:50%;
position:absolute;
display:block;
}
&:before{
content:" ";
left:50%;
top:50%;
height:96px;
width:96px;
margin:-48px;
border-width:6px;
border-left-color:rgba(0,0,0,0);
border-right-color:rgba(0,0,0,0);
border-top-color:rgba(0,0,0,0);
border-bottom-color:rgba(0,0,0,.2);
opacity:1;
-webkit-animation:myspin 1s reverse ease infinite;
}
}
}
@-webkit-keyframes myspin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-16 15:20:22
参见更新代码在IE 这里上的工作
.loader{
height:80px;
width:80px;
position:relative;
margin:100px auto;
.spin {
height:80px;
width:80px;
-webkit-animation:myspin 1s ease infinite;
animation:myspin 1s ease infinite;
&, &:before {
box-sizing:border-box;
border:5px solid blue;
border-left-color:#3369E8;
border-top-color:#D50F25;
border-right-color:#009925;
border-bottom-color:#EEB211;
border-radius:50%;
position:absolute;
display:block;
}
&:before{
content:" ";
left:50%;
top:50%;
height:96px;
width:96px;
margin:-48px;
border-width:6px;
border-left-color:rgba(0,0,0,0);
border-right-color:rgba(0,0,0,0);
border-top-color:rgba(0,0,0,0);
border-bottom-color:rgba(0,0,0,.2);
opacity:1;
-webkit-animation:myspin 1s reverse ease infinite;
animation:myspin 1s reverse ease infinite;
}
}
}
@-webkit-keyframes myspin {
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
@keyframes myspin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}Stack Overflow用户
发布于 2015-04-16 14:45:25
您只使用-webkit-animation、IE和Mozilla，不要使用这个CSS3属性。您应该将-moz-animation用于Mozilla，animation用于IE。看看此链接。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29678102
复制相关文章
相似问题
腾讯云开发者
