用 CSS3 和 JavaScript 制作径向动画菜单
先看demo
See the Pen 圆形动画菜单 by openks (@openks) on CodePen.
html和css都不难,很容易实现,主要问题在于子图标个数和子图标之间的角度不一样
所有子节点都在O点,使用绝对定位后设置子节点的top和left值即可
以A点为例子(其中圆点为50%,50%)
1 2
| left=(50+AD距离)*100% top=(50-AE距离)*100%
|
一旦理解了这些就简单多了附图一张(其中n为子节点个数,i为第i个节点)
;
来源在这里
只不过我一直没看懂它到底是如何计算left和top的,不过思路应该差不多