【发布时间】：2017-07-06 20:30:10
【问题描述】：
我正在努力实现你在图片中看到的：
图片在这里，以防被你屏蔽：http://imgur.com/a/wVtgm
您可能只看到一个图标，但实际上是 4 个图标，图片代表图标应采用的路径。
我已经创建了一个 sn-p 或者这里是一个 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 的图标开始它的轨道，然后一旦到达它的位置，它应该粘在那里，与其他图标一样。
现在，如果您看到我所做的代码 sn-p，则图标会在页面加载后通过到达其原始位置来执行一些动画，但我无法实现触发图标获取所需的内容绕一圈回到原来的位置。
TL;DR：图标从页面加载时图标编号为 4 的位置开始，然后图标应通过从左到右绕圈移动回到其原始位置。
例如： 图标 4 应该留在原处。 图标 3 应该围绕圆圈向下移动一些像素。 以此类推。
所以他们都应该从左向右进入（如跟随领导者）并以他们在图片或 codepen/codespnippet 中的位置结束。
有什么建议吗？
【问题讨论】：
-
图片链接无效。
-
请用更多的词描述行为......
-
@ScottMarcus imgur.com/a/wVtgm
-
@OriDrori 图标从图标编号为 4 的位置开始，然后应该通过从左到右绕圈移动回到原来的位置。
-
这个codepen可能会启发你codepen.io/gc-nomade/pen/GWLZKv，点击链接1，它会再喷出4个，然后点击2，然后点击3等等或者这个有动画自己运行的codepen.io/gc-nomade/pen/rybOmw没有js顺便说一句
标签： javascript jquery html css