HTML5手机端环形菜单交互动效代码

手机端的环形菜单动画，真的挺吸睛的。HTML5 的 touch 事件配上CSS3 的 transform 和 transition，做出来的交互又顺又顺。你只要点一下图标，菜单就像转盘一样展开，看着就挺高级，实际用起来也挺实用。

菜单项分布在圆形上，其实也不难，基本上靠三角函数（别怕，就是Math.sin和Math.cos），配合绝对定位就能搞定。每个菜单按钮放在哪个角度，自己算一算就好，动效一加，立马有那味了。

交互逻辑用点JavaScript就行，比如加个active类控制显隐，或者配合你自己的 UI 框架也行，像Vue、React都能轻松套上去。动画触发点就监听下touchstart事件，响应也快。

你要是想看看完整代码结构，可以去看看texiao1923_1560680929这个例子，里面的index.html、style.css和main.js都比较清楚，适合二次开发。

如果你在做 H5 活动页、导航交互或者 App 启动页的创意菜单，可以拿来改一改，样式灵活，逻辑也不复杂。