我已经使用CSS画了一个圆形。我尝试通过修改代码来解决这个问题,但无济于事。我的主要问题有两个:
在Chrome中:旋转时圆圈会抖动
在Firefox中:当圆圈以圆形运动时,出现类似尾巴的点。
以下是我使用的CSS样式:
.followers_arc_outer{
position:absolute;
width:300px;
height:300px;
border-radius:100%;
border:2px solid;
}
.followers_arc_start {
border-color:transparent #ecd201 #ecd201 #ecd201;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.followers_arc_inner{
position:absolute;
top:18px;
left: 18px;
width: 280px;
height:280px;
border-radius:100%;
border:2px solid;
border-color:transparent #ecd201 #ecd201 #ecd201;
}
.o_circle {
-webkit-animation: rotation 2s infinite linear;
animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}@keyframes rotation{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
.i_circle {
-webkit-animation: rotation2 2s infinite linear;
animation: rotation2 2s infinite linear;
}
@-webkit-keyframes rotation2 {
from {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
to {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}@keyframes rotation2 {
from {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
to {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
<div class="followers_arc_outer followers_arc_start o_circle"></div>
<div class="followers_arc_inner followers_arc_start i_circle"></div>
我创建了一个fiddle。这是链接: http://jsfiddle.net/r8cqet2c/4/
我做错了什么吗?