Я бы создал кольцо, используя два элемента (нижнюю и верхнюю часть), чтобы можно было по-разному регулировать z-индекс каждого из них:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.ring:after {
z-index:1;
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}
@keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-300px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
Еще одна идея, если вам нужна лучшая поддержка, чем clip-path
.Хитрость заключается в том, чтобы играть с прозрачным цветом:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
}
.ring:after {
z-index:1;
border-bottom-color:transparent;
border-right-color:transparent;
}
@keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes translate {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(-310px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>