[英]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.