用纯CSS3做成的Path菜单效果

openkk 10年前
     Path 的 UI 惊起哇声一片,最大的亮点无疑是左下角的菜单展开效果。于是有各个版本的仿 Path 菜单出现,比如我们之前报道过的    <a title="新版 Path 的漂亮菜单 UI 已被开源" href="/misc/goto?guid=4958202954858342905">国内某牛人的作品</a>,这里还有若干个    <a href="/misc/goto?guid=4958202955610671699" rel="external nofollow" target="_blank">关于 Path 菜单的讨论</a>。但最引人注意的还是来自法国小伙    <a href="/misc/goto?guid=4958202956346048909" rel="external nofollow" target="_blank">Victor</a> 的作品:用纯 CSS3 制作的 Path 菜单效果。他说他喜欢 Path 的新界面,尤其是添加菜单,作为一个前端设计师的他打算在浏览器里实现同样的效果。以下是他制作的一段视频:    <embed src="http://player.youku.com/player.php/sid/XMzI5MjI5OTky/v.swf" type="application/x-shockwave-flash" width="550" height="400" quality="high" />    <p> 整个作品通过 html/css3完成,没有使用任何图片,没有任何 javascript。因此仅支持 Webkit 浏览器。Victor 通过 Sass+Compass 计算每个图标的坐标,并生成了动画效果。你不用重写代码就可以添加或删除项目。</p>    <p> 实际效果请移步至<a href="/misc/goto?guid=4958202957094197300" rel="external nofollow" target="_blank">这里</a>,你可以在 github 上找到<a href="/misc/goto?guid=4958202957838176943" rel="external nofollow" target="_blank">这段源代码</a>。<br />       来自: <a id="link_source2" href="/misc/goto?guid=4958202958580867950" target="_blank">www.36kr.com</a></p>