小弟最近在找工作，刚好今天面试笔试的时候遇到一个题：
大概实现后的效果应该是这样的：
说来惭愧，原来只写过简单的平移和隐藏显示动画，还真没接触过这种动画效果。。。。
思路：
1.先画一个圆
2.然后将剩下的8个圆根据这个大圆去做相对定位（如下面第一个图）
3.然后对大圆进行旋转
4.小圆中的数字也要相对反向旋转这样才能字体才会正常显示
在查东西的时候我还接触到了一篇文章给我给了一个思路，显然这就变成了一个和三角函数、圆相关的数学问题。如果是要做成组件的话，肯定是要考虑的更多的，毕竟我这个也只是勉强把功能怼出来了。
文章链接：https://www.cnblogs.com/lufy/archive/2012/06/21/2558049.html
这又喜闻乐见的变成了一个数学问题
我很少接触原生DOM，所以很多地方优化的肯定不好，如果能给各位们一个大概思路节省时间那就再好不过了，具体的实现肯定是要根据每个人的框架和业务需求来修改，这个可以算是一个乞丐版，具体代码如下：
昨天把题目分享给室友以后，今天早上室友也写了一个，用纯css写的，我看了一下感觉效果的确好很多，毕竟没有DOM操作在性能上还是会快很多的，然后我也试（fu）着（zhi）实（zhan）现（tie）了一下：
在浏览器渲染机制的角度来讲，记得css放前面，我自己第一次写的时候都忘了。。
而设置#menu ul li span为display：block的原因入下图，如果不设置的话，就不会发生自转。
