CSS实现反向旋转无重叠半圆环动画问题求助

你遇到的重叠问题核心是变换原点不对——当前两个半圆环的旋转中心是各自元素的中心，而非共同的圆心，导致旋转轨迹错位，自然会重叠。另外容器的尺寸和定位没配合好，也让overflow:hidden没起到应有作用。以下是具体修改方案：

关键修改点 #

• 给两个半圆环设置正确的变换原点：
  • 上半圆环（.top）的圆心在底部中点，设置transform-origin: 50% 100%;
  • 下半圆环（.bott）的圆心在顶部中点，设置transform-origin: 50% 0%;
• 调整容器.wrap的尺寸，刚好包裹两个半圆环，同时开启overflow:hidden避免旋转时元素超出显示
• 用绝对定位固定两个半圆环的位置，确保初始拼接准确
• 加入box-sizing: border-box;，让border宽度不影响元素尺寸，保证半圆形状标准
• 简化动画前缀，主流浏览器已支持标准transform语法

修改后的完整代码 #

HTML（无需改动）

<div class="wrap">
<div class="top"></div>
<div class="bott"></div>
</div>

CSS

@keyframes half_spin {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(20deg); }
    60% { transform: rotate(0deg); }
    80% { transform: rotate(-20deg); }
    100% { transform: rotate(0deg); }
}

.wrap {
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.top {
    width: 300px;
    height: 150px;
    border: 1px solid red;
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    transform-origin: 50% 100%;
    animation: half_spin 5000ms ease-in-out infinite;
}
.top:before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: red;
    content: "";
    top: 0;
    left: 0;
}

.bott {
    width: 300px;
    height: 150px;
    border: 1px solid black;
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    transform-origin: 50% 0%;
    animation: half_spin 5000ms ease-in-out infinite reverse;
}
.bott:before {
    position: absolute;
    width: 100%;
    height: 1px;
    background: black;
    content: "";
    bottom: 0;
    left: 0;
}

修改后两个半圆环会围绕同一个圆心反向旋转，完全不会重叠，同时保留了你想要的半圆环显示样式。

内容的提问来源于stack exchange，提问作者Tanker