0
我正在爲我的網站玩CSS和動畫,並非常喜歡Drawception網站使用的加載CSS的外觀。他們的代碼只能執行90度動畫然後重置。我想讓我的360度旋轉,因爲我的圖像也會旋轉。 這裏是我使用的代碼:CSS3360º連續旋轉在Chrome中運行,但在IE中回滾
<style>
.loading-box2{
width: 35px;
height: 35px;
margin: 0px auto;
}
.loading-box2:before{
content: '';
width: 35px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 44px;
right: 42%;
margin-left: -15px;
border-radius: 50%;
animation: shadow360 2s linear infinite;
}
.loading-box2:after{
content: ':o)';
line-height: 35px;
text-align: center;
font-size: 12px;
width: 35px;
height: 35px;
background: #fffdc9;
animation: boxbounce360 2s linear infinite;
position: absolute;
top: 0;
right: 42%;
margin-left: -15px;
border-radius: 3px;
border: 1px solid #c0c0c0;
/* colours here added while testing */
border-right: 1px solid #f00;
border-top: 1px solid #0f0;
border-left: 1px solid #ff0;
border-bottom: 1px solid #f0f;
}
@keyframes boxbounce360{
3.25%,24.25%,28.25%,49.25%,55.25%,74.25%,78.25%,99.25%{border-radius: 3px; border-bottom-right-radius: 3px;}
0%{transform:translateY(0) rotate(0deg)}
7.84375%{transform: translateY(9px) rotate(22.5deg)}
13.5625%{transform: translateY(18px) scale(1, .9) rotate(45deg);border-bottom-right-radius: 40px}
19.25125%{transform: translateY(9px) rotate(67.5deg)}
25%{transform: translateY(0) rotate(90deg)}
32.84375%{transform: translateY(9px) rotate(112.5deg)}
38.5625%{transform: translateY(18px) scale(1, .9) rotate(135deg);border-top-right-radius: 40px}
44.28125%{transform: translateY(9px) rotate(157.5deg)}
50%{transform: translateY(0) rotate(180deg)}
59.84375%{transform: translateY(9px) rotate(202.5deg)}
64.5625%{transform: translateY(18px) scale(1, .9) rotate(225deg);border-top-left-radius: 40px}
69.28125%{transform: translateY(9px) rotate(247.5deg)}
75%{transform: translateY(0) rotate(270deg)}
82.84375%{transform: translateY(9px) rotate(292.5deg)}
88.5625%{transform: translateY(18px) scale(1, .9) rotate(315deg);border-bottom-left-radius: 40px}
94.28125%{transform: translateY(9px) rotate(337.5deg)}
100%{transform: translateY(0) rotate(360deg)}
}
@keyframes shadow360{
0%,25%,50%,75%,100%{transform: scale(1, 1)}
13.5625%,38.5625%,64.5625%,88.5625%{transform: scale(1.2, 1)}
}
</style>
<body>
<div class="loading-box2">
</body>
而一個的jsfiddle事情here。
在Chrome中,動畫完美運行,始終旋轉相同的方向。但在Internet Explorer 11中,它達到180度,然後旋轉回0! 任何想法如何我可以修復它的IE瀏覽器,最好不需要任何Javascript,但我不會介意,如果它確實需要它。
玩過代碼,我注意到如果我從關鍵幀中刪除所有translateY()和scale()部分,動畫在IE中正常旋轉,但顯然它現在不再上下跳動。 任何想法我可以嘗試? – Doogle