11月30日熟人社交移动应用Path 2.0发布后,因为其精美的界面和漂亮的动画效果受到许多人的赞誉,在Pinterest之后,又涌起一股新的模仿浪潮。
Path 2.0的一个亮点是左下角的菜单展开动画效果:
一个名为Victor的法国人使用纯CSS3在HTML上实现了同样的动画效果,没有使用任何图片和Javascript,具体采用Sass+Compass计算坐标,最后为每一项生成了Keyframe动画,十分的有想象力,动画效果如下所示,也可以在http://dribbble.com/shots/339001-Path-menu-recreated-in-css3查看。
代码里使用了非常多CSS3的特性,例如transform、translate3d、rotateZ、animation、linear-gradient、border-radius、transition、box-shadow等,可以作为很好的CSS3教程和示例,一些相关代码如下所示:
HTML页面见http://namepk.sinaapp.com/blog/path/index.html(请用Chrome观看)。相关代码存放在Github上。
转载请说明:来自蒋宇捷的博客(http://blog.csdn.net/hfahe)。
分享到:
相关推荐
两款纯css3实现的动画菜单
纯CSS3实现百叶窗动画效果 纯CSS3实现百叶窗动画效果
纯CSS3实现3D小球动画 纯CSS3实现3D小球动画网页特效.zip
纯CSS3实现汽车行驶动画是一款纯css制作的额汽车行驶特效
一款纯CSS3汽车行驶动画就非常逼真,汽车是用CSS绘制的,同样行驶动画也是CSS3动画特性实现的
我们知道利用CSS3可以制作很多效果炫酷的3D动画特效,比如这次要分享的一款CSS3菜单,它正是利用了CSS3的一些特性,实现了菜单展开时的3D动画特效,同时当你将鼠标滑过菜单项时,菜单项还会呈现发光的效果,从而使...
纯CSS3实现图标加载动画特效是一款基于框架Loaders.css动画库制作11种实用的图标加载矢量动画特效。
纯CSS3实现发光流星动画特效是一款可爱的发光流星CSS3动画效果。
CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画...今天要分享的是一款用纯CSS3实现的可爱表情动画。一共有7组表情动画,我们可以在文章底部将这些表情用作读者看完文章的心情。
纯CSS3实现线条按钮动画特效是一款鼠标经过显示动画按钮特效。
纯CSS3实现3D波浪形动画是一款3D波浪形动画特效。利用一堆div加上CSS3对每个div的控制,实现波浪起伏的动画效果。
这是一款纯css3炫酷粒子动画特效。该特效使用多个div来制作光点粒子效果,并使用CSS3动画来制作光点粒子的上升动画,效果非常炫酷。
纯CSS3实现旺仔头像动画特效是一款非常可爱的旺仔牛奶卡通人物头像特效。
纯CSS3实现阴阳太极动画
7款纯CSS3实现的炫酷动画应用,网上看到的,觉得错就上传上来,供大家一起共同分享学习。
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效
纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码。
一款基于纯CSS3的发光按钮,按钮发光的颜色是随机的,这样一排...之前我们也介绍过不少样式很独特的CSS3按钮,比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等,都非常不错,也有HTML5动画按钮,大家可以自己看看。
纯css3实现3D波浪形动画