搜索

用纯CSS3做成的Path菜单效果

pestwave · 2011-12-05
Path的UI惊起哇声一片,最大的亮点无疑是左下角的菜单展开效果。于是有各个版本的仿Path菜单出现,比如我们之前报道过的<a title="新版Path的漂亮菜单UI已被开源" href="http://www.36kr.com/p/64382.html" target="_blank">国内某牛人的作品</a>,这里还有若干个<a href="http://www.v2ex.com/t/22743" target="_blank">关于Path菜单的讨论</a>。但最引人注意的还是来自法国小伙<a href="https://twitter.com/#!/_victa" target="_blank">Victor</a>的作品:用纯CSS3制作的Path菜单效果。 他说他喜欢Path的新界面,尤其是添加菜单,作为一个前端设计师的他打算在浏览器里实现同样的效果。

Path的UI惊起哇声一片,最大的亮点无疑是左下角的菜单展开效果。于是有各个版本的仿Path菜单出现,比如我们之前报道过的
国内某牛人的作品,这里还有若干个
关于Path菜单的讨论。但最引人注意的还是来自法国小伙
Victor的作品:用纯CSS3制作的Path菜单效果。

他说他喜欢Path的新界面,尤其是添加菜单,作为一个前端设计师的他打算在浏览器里实现同样的效果。以下是他制作的一段视频:

整个作品通过html/css3完成,没有使用任何图片,没有任何javascript。因此仅支持Webkit浏览器。Victor通过Sass+Compass计算每个图标的坐标,并生成了动画效果。你不用重写代码就可以添加或删除项目。

实际效果请移步至
这里,你可以在github上找到
这段源代码

+1
0

好文章,需要你的鼓励

参与评论
登录后才能参与讨论哦...
后参与讨论
提交评论0/1000

请回复有价值的信息,无意义的评论将很快被删除,账号将被禁止发言。

下一篇

可能是为了避免和“Sandy Bridge”的直接竞争或者进展速度过慢等原因,Intel将“Ivy Bridge”原先的发布时间由<a href="http://www.xbitlabs.com/news/cpu/display/20111130234629_Intel_Schedules_Core_i_3000_Ivy_Bridge_Desktop_Processors_Launch_to_Q2_2012.html">第1季度推迟到了第2季度</a>。并且其提交给合作伙伴的详细规格书也被曝光。

2011-12-05

36氪APP让一部分人先看到未来
36氪
鲸准
氪空间

为你推送和解读最前沿、最有料的科技创投资讯

一级市场金融信息和系统服务提供商

聚集全球最优秀的创业者,项目融资率接近97%,领跑行业