移动后在div之后创建虚线“trail”

Question

我在此demo中使用了大量修改过的菜单：

当较小的圆圈散开时，我想在中央主要项目和较小的外圆圈之间放置多个小“点”，这将形成连接这两个项目的虚线。

它会产生与此类似的效果，但在径向模式中会多次出现（橙色圆圈）：

动态完成此操作的最佳方法是什么？

Answer 1

通常对于这种事情，我建议使用像Raphael这样的库。使用图形库来渲染图形效果而不是HTML DOM确实会使事情变得更容易，特别是当事情变得更复杂时，它也可以更灵活地处理它可以实现的事情。拉斐尔网站上有很多关于它能做什么的演示，我会说，一旦你掌握了Raphael API，这样的效果就会非常容易。缺点是如果你走这条路，你可能不得不用Raphael编写整个菜单，这样你就可以丢掉你已经拥有的并从头开始。

因此，在这种情况下，由于您已经有一个只使用常规HTML元素的工作演示，因此您可以使用您所拥有的内容。它似乎不太难以修改它;只需在主菜单元素后面添加多组元素，并将它们设置为以与它们所遵循的菜单元素相同的速度进行动画处理，但距离较短。

这是一个额外的标记，但应该做的很好。我不会给你详细的指示，因为可能有一百种方法;我没有时间提出整个教程，但在一天结束时，它应该只是复制+粘贴的情况。不是最优雅的编写代码的方式，但它应该工作。我可以预见的唯一警告是，如果你同时在屏幕上制作动画的五倍，它可能会减慢速度。但是，一旦你有了工作，这可以解决。

Answer 2

我创建了a sample，其中包含您需要的动画。以下是它的完成方式：

创建具有径向渐变背景的橙色点并重复它：

background: radial-gradient(circle, orange 5px, transparent 5px) 15px 0;
background-size: 20px 10px;

旋转元素：

transform: rotate(-45deg);
transform-origin: 0 0;

当后方圆圈飞出时，更改元素宽度，使用过渡使其平滑。在我的例子中，我使用了动画，但没有太大区别。

transition: width 2s;