现代 CSS

transition

css3 slideup box

作者：结一 日期：2012-08-27 点击：972
css3
transition
transform
入门级
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 菜单效果

作者：结一 日期：2012-08-23 点击：966
css3
Menu/Navigation
transition
提高篇
纯css3 lavalamp 菜单效果

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

阅读全文

纯css3有序列表

作者：结一 日期：2012-08-23 点击：1104
css3
ul/ol
:before&:after
transform
transition
提高篇
纯css3有序列表
这个前面的数字其实和ol的decimal是没有关系的。其实应用的是:before和counter-increment来生成的。而中间的那个空白的间隔其实是border。其余的一些就是圆角，动画什么的。了解了原理，实践操作下吧。
阅读全文

页面

返回顶部