? ? ? 11月30日熟人社交移動應用Path 2.0 發布后，因為其精美的界面和漂亮的動畫效果受到許多人的贊譽，在Pinterest之后，又涌起一股新的模仿浪潮。 ? ? ? Path 2.0的一個亮點是左下角的菜單展開動畫效果：  ? ? ? 一個名為[Victor](https://twitter.com/#!/_victa)的法國人使用**純CSS3**在HTML上實現了同樣的動畫效果，**沒有使用任何圖片和Javascript**，具體采用Sass+Compass計算坐標，最后為每一項生成了Keyframe動畫，十分的有想象力，動畫效果如下所示，也可以在[http://dribbble.com/shots/339001-Path-menu-recreated-in-css3](http://dribbble.com/shots/339001-Path-menu-recreated-in-css3)查看。  ? ? ? 代碼里使用了非常多CSS3的特性，例如transform、translate3d、rotateZ、animation、linear-gradient、border-radius、transition、box-shadow等，可以作為很好的CSS3教程和示例，一些相關代碼如下所示： ~~~ #menu:checked ~ .items li:nth-child(3) { -webkit-animation-name: "appear-'3'"; -webkit-animation-duration: 240ms; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -webkit-animation-delay: 60ms; } @-webkit-keyframes "appear-'3'" { /* line 48, ../sass/app.scss */ 0% { -webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg); -webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75); } /* line 52, ../sass/app.scss */ 80% { -webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78); -webkit-transform: translate3d(183px, -140px, 0px) rotateZ(0deg); } /* line 56, ../sass/app.scss */ 100% { -webkit-transform: translate3d(159px, -122px, 0px); } } ~~~ HTML頁面見[http://namepk.sinaapp.com/blog/path/index.html](http://namepk.sinaapp.com/blog/path/index.html)（請用Chrome觀看）。相關代碼存放在[Github](https://github.com/Victa/path-menu)上。 ? ? ? 轉載請說明：來自蔣宇捷的博客（http://blog.csdn.net/hfahe）。