我写了一个纯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>
我的完整代码为 here .谢谢。
最佳答案
在这儿,请查收。这是因为你给了 .circle-left
和 .circle-right
left: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>
关于html - 纯CSS绘制圆形动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53332736/