现代 CSS

提高篇

藤藤每日一练——Pure CSS3 Lavalamp Menu

藤藤每日一练——Pure CSS3 Lavalamp Menu

Lavalamp Menu是一种很好的效果,早期在国外的博客中看到过这种效果,是通过jquery插件制作的,一开始还不知道这种效果就叫Lavalamp呢?后来为之告诉我的,今天使用CSS3写了一个垂直的Lavalamp的导航效果,这个效果其实很简单,主要是ribbons的制作要点功夫,然手就是选择器的使用,如果你掌握了这两个部分的知识,那么制作这个效果只是一个思路问题,看看代码你就知道了。

藤藤每日一练——CSS3 Animation Menu

藤藤每日一练——CSS3 Animation Menu

这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果,整个效果未采用任何js脚本代码,其中下接的折叠效果是通过transform的rotate来实现的,而transition是用来控制动画更具线性,当然这个效果也用到了transform的3d旋转属性,感兴趣的可以围观一下。扩大你自己的视野。

藤藤每日一练——Pure CSS3 Dashboard

藤藤每日一练——Pure CSS3 Dashboard

这个案例是一个登录后个人信息控制面板,包含了个人用户头像,整个信息面板以及一个退出按钮。其中最有特色的是信息面板的下拉菜单使用CSS3的animation、transform制作了一个动感十强的效果。

CSS3 Tucked Corners

CSS3 Tucked Corners

这个DEMO是来自于Red Team Design。这个站点是一个学习CSS3的好去处,简单明了,也是我常常去逛的一个网站。今天收到一个CSS3效果,就类似于一张图片四个角使用一个折角遮盖的效果。在整个效果制作中使用了两个标签配合“:after”和“:before”制作了四个折角,同时使用旋转transform以及定位到每个角落上,其中最难的一点就是,使用gradient制作了四个切角效果,这个效果在《CSS3+jQuery制作切角的Tabs》一文中有做过详细介绍。接下来将这个效果使用代码展现给大家。希望大家通过这个案例会有所收获。

返回顶部