[英]CSS error in other browsers
我將此處的CSS代碼用於我的網站加載程序。 我在IE和Mozilla上遇到了問題,一切都沒有按照預期的方式進行。
在IE中,沒有動畫和圖形中斷,在Mozilla中沒有動畫,並且圖形看起來也不正確。
@bg: #2c3e50;
/*.triangle(@triangle: border-left: 60px solid transparent;
border-right: solid transparent;
border-top: 0 solid transparent;);*/
body{
background: @bg;
}
.loader {
border-radius: 50%;
margin: 0 auto;
position: absolute;
top: 40%;
left: 0;
right: 0;
height: 50px;
width: 50px;
}
.tri {
animation: translateRotation 1.5s infinite reverse;
-webkit-animation: translateRotation 1.5s infinite reverse;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 0 solid transparent;
border-bottom: 60px solid #00b4ff;
width: 0px;
z-index: 2;
}
.tri2 {
animation: translateRotation 1.5s infinite;
-webkit-animation: translateRotation 1.5s infinite;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 0px solid transparent;
border-bottom: 40px solid #ffde15;
width: 0px;
z-index: 1;
}
.tri3 {
animation: translateRotation 1.5s infinite;
-webkit-animation: translateRotation 1.5s infinite;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #1da158;
border-bottom: 0px solid transparent;
width: 0px;
z-index: 1;
}
.tri4 {
animation: translateRotation 1.5s infinite reverse;
-webkit-animation: translateRotation 1.5s infinite reverse;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea343f;
border-bottom: 0px solid transparent;
width: 0px;
z-index: 2;
}
.circ {
border: 30px solid rgba(255,255,255,0.1);
}
.circ2 {
border: 25px solid rgba(255,255,255,1);
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0, 0.15), 0 -2px 1px rgba(0,0,0, 0.15), -2px 0 1px rgba(0,0,0, 0.15), 2px 0 1px rgba(0,0,0, 0.15);
margin-top: 30px;
z-index: 90;
}
/* ANIMATE */
@-webkit-keyframes translateRotation {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg);}
}
問題是您僅使用@-webkit-keyframes
而不是@keyframes
和-webkit-transform
而不是transform
,因為從IE10 +開始,這些前綴不帶前綴
您應該在動畫關鍵幀上方添加以下代碼,並且應在IE10 +上運行:
@keyframes translateRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
在此處檢查keyframe-animation-syntax以查看所有前綴。
對於IE9,您可能應該使用jQuery / jQueryUI之類的Javascript動畫,您可以使用Modernizr檢查是否有必要使用
if(!Modernizr.cssanimations) {
// Fallback
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.