藤藤每日一练——CSS3 Animation Menu
这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果,整个效果未采用任何js脚本代码,其中下接的折叠效果是通过transform的rotate来实现的,而transition是用来控制动画更具线性,当然这个效果也用到了transform的3d旋转属性,感兴趣的可以围观一下。扩大你自己的视野。
![藤藤](https://static.fequan.com/vueconf/img/default_avatar.png)
这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果,整个效果未采用任何js脚本代码,其中下接的折叠效果是通过transform的rotate来实现的,而transition是用来控制动画更具线性,当然这个效果也用到了transform的3d旋转属性,感兴趣的可以围观一下。扩大你自己的视野。
早期制作手风琴菜单都需要依赖于js的脚本来实现,自从CSS3出现后,制作这种效果不在需要依赖于任何脚本。另外实现手风琴效果的制作方法有很多种,但较为常见的是使用css3的“:target”选择器来实现。在本例中也是一样的,通过“:target”选择器来控制下接菜单的“max-height”,原理简单,方法也简单,只是细节处理稍加注意。
Lavalamp Menu是一种很好的效果,早期在国外的博客中看到过这种效果,是通过jquery插件制作的,一开始还不知道这种效果就叫Lavalamp呢?后来为之告诉我的,今天使用CSS3写了一个垂直的Lavalamp的导航效果,这个效果其实很简单,主要是ribbons的制作要点功夫,然手就是选择器的使用,如果你掌握了这两个部分的知识,那么制作这个效果只是一个思路问题,看看代码你就知道了。
菜单效果在网上琳琅满目,w3cplus也制作了不少。今天根据Metrostyle的UI设计效果,配合CSS3的transform,aimation属性制作了一个下拉的动画导航效果。这个效果在webkit浏览器下得到较好的支持,在Firefox下有些卡。其中最关键的地方使用了两个额外标签控制翻转的前后效果,详细的制作过程看代码吧。
由于藤藤忙于考试,所以好久没有和大家分享CSS3的案例了,今天藤藤特意整理了一个DEMO与大家分享。这个案例是一个圆形转盘导航,初看效果可能很多人都会认为不可思议,CSS3能做出这样的效果,是的,真的是CSS3做的。在整个效果中有几个关键之处,扇形形是通过clip、border-radius和transfrom来实现,其中使用gradient和box-shadow制作了不同的颜色块。对于icon就不用说了,@font-face来完成的。如果你感兴趣,不仿自己先思考一下。
下拉菜单如果不需要兼容IE6的话,完全可以不依赖于任何js脚本实现,今天这个案例也是有关于CSS下拉菜单,但有别于以往的,主要区别是子菜单是固定显示在那,而不是默认隐藏,鼠标悬浮显示的那种,另外还通过CSS3添加了一个滑动块的效果,以前这种滑动块效果也是需要js来实现,今天看到的是没有使用任何脚本代码,感兴趣的不仿一看。
辞岁迎新,在2012年w3cplus为大家提供了116个案例,其中案例有原创,也有仿制,同时也有转载,但这些案例都是最新,最有创意的,也是我们精心挑选的,让我从中获益不浅。从藤藤加入w3cplus后,我们开辟了一个藤藤每日一练 栏目,她经过自己的努力和大有分享了近四十个有关于CSS3的案例,这些案例有的是独立创造的,有的是根据国外知名的设计图,将设计转换为CSS3的code。我想有很多同学从中学到了自己想学的知识。我们将在2013年会为大家推出更多的、更有意义的案例。今天藤藤为大家提供新年来第一个案例。希望大家喜欢,更希望大家能支持我们w3cplus的发展。
这一个个人信息面板导航效果,整个效果展示的是个人相关信息的菜单项,以及搜索功能。在这个案例中使用的CSS3属性相对较多,有transition做的过渡动画效果、有transform做的3D旋转动画、@font-face实现的icon效果,gradient制作的双色块导航背景。而其中运用的最好的是CSS3的选择器,整个案例中使用了多个CSS3选择器,来控制需要选择的元素,比如说“:not”选择器,“nth-children()“选择器,详细的请看Demo的整个实现过程。
白牙同学好久都没有做练习了,今天为大家带来一个CSS3制作的简单大型导航,运用到的CSS3属性包括圆角border-radius、渐变、盒子和文字阴影等等。
简约而又养眼的一个导航。