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 启动页的创意菜单,可以拿来改一改,样式灵活,逻辑也不复杂。
下载地址
用户评论