javascript - 移动时在 div 后创建虚线“轨迹”

Question

我有这个演示中使用的菜单的一个经过大量修改的版本：

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

它会产生与此类似的效果，但以放射状图案（橙色圆圈）多次：

动态完成此任务的最佳方法是什么？

Answer 1

通常对于这种事情，我建议使用像Raphael这样的库。使用图形库而不是 HTML DOM 来呈现图形效果确实会使事情变得更容易，尤其是当事情变得更加复杂时，而且它可以实现的事情也更加灵活。Raphael 站点有很多关于它能够做什么的演示，我想说，一旦你掌握了 Raphael API 的窍门，这样的效果会很容易。缺点是如果你走这条路，你可能不得不使用 Raphael 编写整个菜单，所以你会扔掉你已经拥有的东西并从头开始。

因此，在这种情况下，既然您已经有了一个只使用常规 HTML 元素的工作演示，那么您不妨使用现有的。修改它似乎不应该太难；只需在主菜单元素后面添加额外的几组元素，并将它们设置为以与它们跟随的菜单元素相同的速度进行动画处理，但距离更短。

这是相当多的额外标记，但应该做得很好。我不会给你详细的说明，因为可能有一百种方法。而且我没有时间想出一个完整的教程，但归根结底，它应该只是复制+粘贴的情况。不是最优雅的代码编写方式，但它应该可以工作。我可以预见的唯一警告是，如果您同时在屏幕上播放五倍的动画内容，它可能会减慢速度。但是，一旦您使事情正常进行，就可以进行。

Answer 2

我已经创建了一个您需要的动画示例。这是如何完成的：

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

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

旋转元素：

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

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

transition: width 2s;