我正在制作一个用于预加载网站的简单动画。这真的很简单。这是我的代码:
<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
是否有原因?
关于html - chrome 中的边界半径错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46964581/