z-index值来控制各个半圆显示的优先顺序。内圆的css实现部分为：
/*左边两个半圆*/
.lt-round, .lt-mask {
position: absolute;
width: 35px;
height: 70px;
border-radius: 35px 0 0 35px;
transform-origin: right center;
}/*右边两个半圆*/
.rt-round, .rt-mask {
position: absolute;
left: 50%;
width: 35px;
height: 70px;
border-radius: 0 35px 35px 0;
}
下面过程描述内圆的动画全程（其中右边的粉色全程不需要动，右边红色部分只需要改变
z-index的值来改变显示的优先级，从而实现显示和隐藏的效果来配合补充左半边的圆。）：1、初始设置：
红左 z-index：3
粉1 z-index：2 红右 z-index：1
粉2 z-index：0
模型图：
视觉效果图(忽略中间的白线)：
2.左边红色旋转完180度时（逆时针旋转所以是360→180→0）
模型图：
视觉效果图：
3.左边红色转完到0度时（此时左右两边的红色半圆被粉色覆盖）
模型图：
视觉效果图：
4.粉色半圆重复之前红色半圆的动画（即左边粉色360→180→0）
模型图：
视觉效果图：
5.当左边粉色旋转到0度时，全部半圆回到了最初始的状态，整个动画即完成（在相同时间下外圈完成了2次的动画）。
模型图：
视觉效果图：
动画代码部分
1、前半程为左边红色旋转一周，后半程为粉色旋转一周。动画实现如下：
/*左边红色完成第一圈的旋转*/
@keyframes ltRound {
0% {
transform: rotate(360deg);
}
24.9% {
z-index: 3;
}
25% {
z-index: 1;
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
74.9% {
z-index: 1;
}
75%, 100% {
z-index: 3;
}
}/*右边红色圆通过z-index来控制显示和隐藏，从而达到在适当时间配上左半圆的效果*/
