我试图让两个不同点的圆的边界从圆的 x 轴开始，然后从 0%-100% 关键帧开始连接。
我想出了如何创建一个圆圈作为外部 div，并将它分成不同的象限。 1、2、3 和 4。但是，现在我的象限边界都显示在一条线上，而不是在圆的边界上。
如何让象限边框显示成一个圆圈。
我已经在下面创建了我正在尝试做的事情的插图，并展示了我到目前为止所做的事情。
.outer {
border-radius: 50%;
height: 500px;
width: 500px;
border: 1px solid #e0e0e0;
position: relative;
}
.quad1,
.quad2 {
left: 50%;
border: 5px solid #e0e0e0;
transform-origin: left bottom;
-webkit-animation: circle 4s 1 normal forwards;
animation: circle 4s 1 normal forwards;
}
.quad3,
.quad4 {
left: 0%;
border: 5px solid #e0e0e0;
transform-origin: right top;
-webkit-animation: circle 4s 1 normal forwards;
animation: circle 4s 1 normal forwards;
}
.quad1,
.quad4 {
top: 0%;
border: 5px solid #e0e0e0;
-webkit-animation: circle 4s 1 normal forwards;
animation: circle 4s 1 normal forwards;
}
.quad2,
.quad3 {
top: 50%;
border: 5px solid #e0e0e0;
-webkit-animation: circle 4s 1 normal forwards;
animation: circle 4s 1 normal forwards;
}
@-webkit-keyframes circle {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes circle {
0% { opacity: 0; }
100% { opacity: 1; }
}
<div class="outer">
<div class="quad1"></div>
<div class="quad2"></div>
<div class="quad3"></div>
<div class="quad4"></div>
</div>
这有点棘手，但却是一个有趣的问题。
有 4 个四分之一圆。其中两个旋转 90˚，另外两个旋转 180˚ 的时间翻倍。还有两个蒙版隐藏了象限 2 和 4 中的四分之一圆，直到它们旋转 90˚，此时蒙版的 z 索引发生变化，不再隐藏四分之一圆。
看看这个工作 fiddle :https://jsfiddle.net/3x2L47Lv/4/
<div class="wrapper">
<div class="spinner top topright"></div>
<div class="spinner top topleft"></div>
<div class="spinner bottom bottomleft"></div>
<div class="spinner bottom bottomright"></div>
<div class="mask q2"></div>
<div class="mask q4"></div>
</div>
body {
background-color: white;
}
.wrapper {
width: 250px;
height: 250px;
position: relative;
background: inherit;
}
.spinner {
width: 125px;
height: 125px;
position: absolute;
border: 5px solid black;
z-index: 10;
}
.top {
top: 130px;
left: 130px;
border-radius: 0 0 130px 0;
border-left: none;
border-top: none;
transform-origin: top left;
}
.bottom {
border-radius: 130px 0 0 0;
border-bottom: none;
border-right: none;
transform-origin: bottom right;
}
.topright, .bottomleft {
animation: rotate90 2s linear forwards;
}
.topleft, .bottomright {
animation: rotate180 4s linear forwards;
}
.mask {
width: 130px;
height: 130px;
position: absolute;
opacity: 1;
background: inherit;
z-index: 15;
animation: mask 4s linear forwards;
}
.q2 {
top: 0;
left: 0;
}
.q4 {
top: 130px;
left: 130px;
}
@keyframes rotate90 {
0% { transform: rotate(0deg); }
100% { transform: rotate(-90deg); }
}
@keyframes rotate180 {
0% { transform: rotate(0deg); }
100% { transform: rotate(-180deg); }
}
@keyframes mask {
0% {z-index: 15}
100% {z-index: 4}
}
更新:
如果你想让它完成一个圆圈，然后反转，你可以做的是让所有的动画时间相同，然后将@keyframes改成如下:
@keyframes rotate90 {
0% { transform: rotate(0deg); }
25%, 75% { transform: rotate(-90deg); }
100% { transform: rotate(0deg); }
}
@keyframes rotate180 {
0% { transform: rotate(0deg); }
50% { transform: rotate(-180deg); }
100% { transform: rotate(0deg); }
}
@keyframes mask {
0% {z-index: 15}
50% {z-index: 4}
100% {z-index: 15}
}
带有效果反转的 fiddle 示例:https://jsfiddle.net/3x2L47Lv/6/