我想在页面完全加载时显示加载 div。 CSS 旋转功能在 Google Chrome 上完美运行,但在 IE 中不起作用。
我的 CSS 代码和 html 代码如下。
/*Transparent*/
.tr_loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.5);
}
.tr_loading-wheel {
width: 20px;
height: 20px;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
left: 50%;
border-width: 30px;
border-radius: 50%;
-webkit-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation:spin 1s linear infinite;
}
.style-2 .tr_loading-wheel {
border-style: double;
border-color: #ccc transparent;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
<div class="tr_loading style-2">
<div class="tr_loading-wheel"></div>
</div>
最佳答案
以下是供应商前缀代码的示例,并非所有浏览器都支持。
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
使用标准变体,即:
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
请参阅 MDN 上的 @keyframes
详细文档.
工作演示:
/*Transparent*/
.tr_loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.5);
}
.tr_loading-wheel {
width: 20px;
height: 20px;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
left: 50%;
border-width: 30px;
border-radius: 50%;
-webkit-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation:spin 1s linear infinite;
}
.style-2 .tr_loading-wheel {
border-style: double;
border-color: #ccc transparent;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
<div class="tr_loading style-2">
<div class="tr_loading-wheel"></div>
</div>
关于html - 加载动画在 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44383862/