Space的gravatar头像
Space2014-03-31 23:59:26

HTML5+CSS3实现iOS Path菜单特效,动画效果很酷

菜单动画很酷(酷、炫、吊炸天)

Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path菜单,点击按钮,即可弹出子菜单,子菜单弹出的动画非常炫酷。点击子菜单,即可打开相应功能。

其中里面用到less和coffeescript

名词解释:

 LESS是一个免费开源的,从Ruby的LESS library衍生而来。.LESS是一个允许web开发人员使用更加先进的语言特性的语法解析器,这些特性包括变量,操作符,嵌套规则。

CoffeeScript是一种新的编程语言,构建于 JavaScript 之上,可编译成高效 JavaScript,除了可在 Web 浏览器中运行 JavaScript,您还可以将它与诸如 Node.js 一类的技术相结合用于构建服务器应用程序。

1、

HTML5+CSS3实现iOS Path菜单特效,动画效果很酷

2、点击上面图标后会变成下面(此处应该有动画)

HTML5+CSS3实现iOS Path菜单特效,动画效果很酷

3、然后那个星星图标也可以点击,点击后有特效,但是不好截图(请各位自己去尝试)


最代码官方编辑于2016-3-15 9:28:56


打赏

文件名:html5-css3-path-menu.rar,文件大小:42.557K下载
  • /
      • /html5-css3-path-menu
          • /html5-css3-path-menu/coffeescript
            • /html5-css3-path-menu/coffeescript/index.coffeescript
          • /html5-css3-path-menu/css
            • /html5-css3-path-menu/css/style.css
        • /html5-css3-path-menu/index.html
          • /html5-css3-path-menu/js
            • /html5-css3-path-menu/js/index.js
            • /html5-css3-path-menu/js/jquery.js
            • /html5-css3-path-menu/js/prefixfree.min.js
          • /html5-css3-path-menu/less
            • /html5-css3-path-menu/less/style.less
最代码最近下载分享源代码列表最近下载
王子轩 LV22019年5月15日
星星星星
jhgvcvghjkil LV22019年1月1日
星星星星
laoyaoshui LV162018年12月12日
太阳
gsdgfbsdgbs LV22018年11月21日
星星星星
diyanzhao1 LV112018年8月31日
月亮月亮星星星星星星
gogoLJY LV12018年8月4日
星星
1792312911 LV172018年7月12日
太阳星星
CP123456222333 LV102018年7月6日
月亮月亮星星星星
ych999 LV72018年2月1日
月亮星星星星星星
hlgwhy LV152017年4月12日
月亮月亮月亮星星星星星星
最代码最近浏览分享源代码列表最近浏览
天之颠昨天
暂无贡献等级
刘铭远 LV98月28日
月亮月亮星星
rachier LV18月18日
星星
luluting LV18月15日
星星
daidongfeng LV17月8日
星星
yuzijan LV16月30日
星星
daan196月19日
暂无贡献等级
michelleTSJ LV46月12日
月亮
1548602858 LV45月26日
月亮
scallan5月9日
暂无贡献等级
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友