transition

css3 slideup box

css3 slideup box
本实例主要是对css3的transition属性的应用,同时应用了rotate旋转和nth-child子元素选择器。原理是先设置容器为一定的高度并overflow为hidden,然后标题的高度为整个高度且opacity为1,而内容为一定的rotate角度且opacity为0。当鼠标滑过的时候标题margin为负的容器高度,opacity为0,而内容的rotate为0,opacity为1。当然最关键的是我们的transition的应用,把这些变化动画化。而内容的背景图片就充分应用了nth-child子元素选择器。

纯css3 lavalamp 菜单效果

纯css3 lavalamp 菜单效果

曾经我们对于jquery实现的lavalamp那是极度热爱啊,现在不用借助jquery,我们用纯css3实现了,过瘾啊。技术的关键在于在菜单的li最后先增加一个空元素来承载那个滑动的东西,再使用css3的兄弟元素选择器~,然后对于不同的li滑过的时候,设置承载滑动的那个元素的left位置。

纯css3有序列表

纯css3有序列表
这个前面的数字其实和ol的decimal是没有关系的。其实应用的是:before和counter-increment来生成的。而中间的那个空白的间隔其实是border。其余的一些就是圆角,动画什么的。了解了原理,实践操作下吧。

页面

返回顶部