纯CSS+JS实现动态星型拓扑图：轻量级关系图绘制方案

1. 为什么选择纯CSS+JS绘制星型拓扑图？

在项目里，我们经常会遇到需要展示一个核心节点与多个关联节点之间关系的场景，比如一个数据中心的核心服务器与它的终端设备，或者一个社交网络中的核心用户与他的好友圈。这种图形化展示，专业上叫做星型网络拓扑图，或者更通俗点，就是关系图。

一提到画图，很多前端同学的第一反应可能就是去翻找那些功能强大的图表库，比如 D3.js 或者 ECharts。没错，它们确实能帮你快速搞定，API丰富，效果也炫酷。但不知道你有没有遇到过和我一样的纠结：整个项目里，可能就这一个页面需要用到这种关系图。为了这一个功能，就要引入一个动辄几百KB甚至上兆的第三方库，总觉得有点“杀鸡用牛刀”。更别说这些基于 Canvas 的库，在数据量稍大或者动画复杂时，对性能的消耗也是不容忽视的，尤其是在一些低端设备或者嵌入式硬件上，可能会成为页面流畅度的瓶颈。

我就在一个物联网设备的管理后台项目里踩过这个坑。那个页面只需要展示一个网关设备和它下面连接的十几个传感器，用 ECharts 画了个简单的力导向图，结果在老的平板设备上，页面滚动和切换都变得有点卡顿。后来排查发现，就是这个图表库的初始化开销和持续的动画渲染拖了后腿。于是我就琢磨，能不能用更轻量的方式来实现？毕竟需求并不复杂：一个会转动的中心圆环，周围一圈均匀分布的小圆点，中间用线连起来。

这就是我们今天要聊的纯CSS+JS实现动态星型拓扑图方案的由来。它的核心优势就两个字：轻量。不依赖任何第三方图形库，只用浏览器原生支持的 CSS 和一点点 JavaScript 来计算布局。最终产出的代码体积可能只有几KB，性能开销极小，动画流畅度却非常高，因为CSS动画是由浏览器引擎直接优化的。对于那些对包体积敏感（比如移动端H5）、对性能要求苛刻，或者只是单纯不想为一个小功能引入大库的项目来说，这个方案是一个非常务实的选择。接下来，我就带你一步步拆解，看看这个“小而美”的方案是怎么从零搭建起来的。

2. 核心目标：打造一个会“呼吸”的动态中心节点

整个星型拓扑图最吸引眼球的部分，肯定是那个处于视觉中心、不断旋转的节点。我们的目标不仅仅是画一个静态的圆，而是要实现一个有层次感、带渐变色彩并且内外圈反向旋转的动态效果。这听起来复杂，但拆解开来，其实就是几个CSS技巧的组合拳。

2.1 破解环形渐变：四象限拼接法

第一个难点是如何实现那个环绕中心、色彩均匀过渡的渐变圆环。你可能会想，给一个圆形div设置background-image: linear-gradient(...)不就行了吗？我一开始也这么试过，但立刻发现行不通。因为CSS的线性渐变是沿着一条轴线分布的，直接应用在圆形背景上，会出现颜色分布不均匀、过渡生硬的问题，完全不是我们想要的环绕效果。

那怎么办呢？我盯着设计稿看了半天，发现这个圆环上的渐变，其实是由一组相同的颜色序列，沿着圆周重复了四次。好比一个钟表盘，在12点、3点、6点、9点四个方向开始，都有一段相同的色彩过渡。既然整体难做，我们就“化整为零”。把整个大圆环想象成一个披萨，我们把它切成完全相等的四块。

每一块都是一个独立的div，大小占外层容器的四分之一，定位在左上、右上、左下、右下四个角落。然后，我们为每一块设置相同颜色但不同方向的线性渐变。比如，左上角那块，渐变方向是to top right（指向右上角）；右上角那块，渐变方向是to bottom right（指向右下角），以此类推。这样，当四块拼在一起时，它们的渐变方向就首尾相连，形成了一个闭合的、环绕的渐变环。

<div class="outer-ring">
  <div class="quadrant quadrant-1"></div>
  <div class="quadrant quadrant-2"></div>
  <div class="quadrant quadrant-3"></div>
  <div class="quadrant quadrant-4"></div>
  <!-- 后续还会放入内圈等其他元素 -->
</div>