我正在尝试实现您在图片中看到的内容：
这是我要实现的描述：
1- 所有图标在页面加载时必须位于同一位置，即您可能会看到数字4的图标所在的位置。
2- 然后，每个图标都应该开始沿着圆圈的路径移动，并粘附到其常规状态/位置。我的意思是：带有数字3的图标开始它的轨迹，然后一旦到达其位置，它应该停留在那里，其他图标也是如此。
目前，如果您看到我编写的代码片段，图标正在执行一些动画，以便在页面加载后回到其原始位置，但我无法实现我需要的内容，即通过绕过圆圈触发图标返回其原始位置。
简而言之：图标从页面加载时的编号为4的位置开始，然后图标应通过沿着圆圈从左向右移动来返回其原始位置。
例如： 图标4应保持不变。 图标3应围绕圆圈向下移动一些像素。 等等。
因此，它们应该都从左边开始向右移动（就像跟随领导者一样），并最终停在图片或codepen/codespnippet中所处的位置。
有什么建议吗？
如果您无法加载图片，请点击这里：http://imgur.com/a/wVtgm
图中只有一个图标，但实际上有4个图标，该图片表示图标的路径。
我创建了一个代码片段，或者您可以在这里查看：Codepen
var outerBox = $('.eight-box'),
boxHeight = $(outerBox).height(),
boxWidth = $(outerBox).width();
function changeNumbers() {
var pos1 = $('.pos-1'),
pos2 = $('.pos-2'),
pos3 = $('.pos-3'),
pos4 = $('.pos-4');
$('.col-1').addClass('pos-1');
$('.col-1').removeClass('pos-4')
$('.col-2').addClass('pos-2');
$('.col-2').removeClass('pos-4')
$('.col-3').addClass('pos-3');
$('.col-3').removeClass('pos-4')
};
// var refreshId = setInterval(changeNumbers, 1500);
changeNumbers();.eight-box {
position: relative;
display: block;
margin: 1em auto;
width: 16em;
height: 16em;
font-family: sans-serif;
font-size: 20px;
border: 1px solid;
border-radius: 50%;
}
.fig-8 {
display: block;
position: absolute;
color: #fff;
width: 2em;
height: 2em;
line-height: 2;
text-align: center;
font-weight: bold;
font-smoothing: antialiased;
transition: all .5s linear;
overflow: hidden;
z-index: 5;
}
.col-1 {
background: #1abc9c;
}
.col-2 {
background: #9b59b6;
}
.col-3 {
background: #27ae60;
}
.col-4 {
background: #2c3e50;
}
.pos-1 {
top: 30%;
left: 93.75%;
}
.pos-2 {
top: 66.25%;
left: 88.75%;
}
.pos-3 {
top: 72.92%;
right: 83.125%;
}
.pos-4 {
top: 19.58%;
right: 88.75%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eight-box">
<div class="fig-8 col-1 pos-4">1</div>
<div class="fig-8 col-2 pos-4">2</div>
<div class="fig-8 col-3 pos-4">3</div>
<div class="fig-8 col-4 pos-4">4</div>
</div>1- 所有图标在页面加载时必须位于同一位置，即您可能会看到数字4的图标所在的位置。
2- 然后，每个图标都应该开始沿着圆圈的路径移动，并粘附到其常规状态/位置。我的意思是：带有数字3的图标开始它的轨迹，然后一旦到达其位置，它应该停留在那里，其他图标也是如此。
目前，如果您看到我编写的代码片段，图标正在执行一些动画，以便在页面加载后回到其原始位置，但我无法实现我需要的内容，即通过绕过圆圈触发图标返回其原始位置。
简而言之：图标从页面加载时的编号为4的位置开始，然后图标应通过沿着圆圈从左向右移动来返回其原始位置。
例如： 图标4应保持不变。 图标3应围绕圆圈向下移动一些像素。 等等。
因此，它们应该都从左边开始向右移动（就像跟随领导者一样），并最终停在图片或codepen/codespnippet中所处的位置。
有什么建议吗？