装载机在IE 11中波动

Posted 2021-03-31

我用css创建了一个简单的加载器。在其他浏览器中工作正常，但它在IE 11 / Edge中波动。

这里我在html中有一个装载器div：

<div class="loader"> </div>

这是我的装载机的css：

body{
  background:black;
}
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite; /* Safari 4+ */
    -moz-animation: spin 2s linear infinite; /* Fx 5+ */
    -o-animation: spin 2s linear infinite; /* Opera 12+ */
    animation: spin 2s linear infinite;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

这是小提琴：

Fiddle

答案

试试这个

body{
  background:black;
}
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite; /* Safari 4+ */
  -moz-animation: spin 2s linear infinite; /* Fx 5+ */
  -o-animation: spin 2s linear infinite; /* Opera 12+ */
  -ms-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;

}
@keyframes spin{
    0% {transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}
@-webkit-keyframes spin{
    0% {transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}
@-moz-keyframes spin{
    0% {transform:rotateZ(0deg);}
    100% {transform:rotateZ(360deg);}
}
@-ms-keyframes spin{
    0% {transform:rotateZ(0deg);}
    100% {transform:rotateZ(360deg);}
}
@-o-keyframes spin{
    0% {transform:rotateZ(0deg);}
    100% {transform:rotateZ(360deg);}
}

在fiddle上查看