纯CSS绘制圆形动画

Question

我写了一个纯css绘制的圆形动画，但在动画过程中，两个半圆之间有一点空白。(动画结束后，他们就走了。(

有人能告诉我为什么会发生这种事吗？

我的HTML:

.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 0;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 0;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}

<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>

我的完整代码在这里。非常感谢。

Answer 1

给你，请查收。这是因为你分别给了.circle-left和.circle-rightleft:0;和right:0;，把它改成left:1px;和right:1px;，你就完成了。。。

.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 1px;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px solid teal;
border-left: 20px solid teal;
left: 1px;
animation: circleLeft 5s linear forwards;
}
@keyframes circleRight {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleLeft {
0%,
50% {
transform: rotate(-135deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}

<div class="circle__box">
<div class="circle__wrapper circle__wrapper--right">
<div class="circle__whole circle__right"></div>
</div>
<div class="circle__wrapper circle__wrapper--left">
<div class="circle__whole circle__left"></div>
</div>
</div>

Answer 2

这是我的解决方案：

.circle__wrapper--right { right: 0; margin-right: 20px;}

.circle__wrapper--left { left: 0; margin-left: 20px; }