[英]Error with border-radius in chrome
我正在制作一個用於預加載網站的簡單動畫。 真的很簡單。 這是我的代碼:
<div id="loader-wrapper">
<div id="loader">
</div>
</div>
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50em;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loader:before{
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after{
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(100deg);
-ms-transform: rotate(100deg);
transform: rotate(100deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(100deg);
-ms-transform: rotate(100deg);
transform: rotate(100deg);
}
}
在jsfiddle中工作很奇怪,但是在chrome上卻沒有。
border-radius屬性適用於#loader.before和#loader.after,但不適用於#loader。 我見過很多解決方案,但沒人能解決。 誰能解決這個問題?
您的代碼在Chrome中對我來說效果很好。 您能否發布有關您遇到的渲染問題的更多信息?
另外,您是否有理由在兩個內圓上都將border-radius聲明為%
,而對於父級,則聲明了em
?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.