这三个案例实际上就是用了两种技术，一个是radio来控制，一个是checkbox来控制，用radio表示只有一个可以展开（radio的只有一个是选中状态），而checkbox则表示可以同时展开多个（checkbox可以多个选中）。其实道理都是一样的，对radio或者checkbox的选中状态进行判断，然后决定其下面的兄弟元素的高度。

本实例通过对radio按钮的状态判断来实现折叠效果。主要应用的是兄弟元素选择器~，注意这个兄弟元素选择器只选择后面的兄弟元素，对于同级的前面的兄弟元素css3还没有响应的选择器。然后综合应用:before和transition来实现前面图标的切换及高度的伸展动画。这个高度的伸展变化必须设置一个具体的值，如为auto则没有transition动画效果，只是切换而已。

sofish在《CSS quiz: 带边 border 的三角形》制作介绍了使用border制作三角的兼容方案，很实用的一个东东。目前这种效果在Web中的运用是越来越多，有很多同学也想尽办法：有使用图片的，有使用border的，当然还有使用其他方法的。今天我要为大家介绍的是使用“::after”和"::before"配合border制作带边三角提示框，并为大家推荐一个在线制作工具。只不过这种方法不兼容IE8以及其以下的浏览器。如果要兼容IE，建议使用sofish的方法。

其实分析每个css3的案例动画，首先做的应该是先把动画停下来，了解下初始是怎么样的。如这个我们一开始看到这么绚的动画加载效果，一般都认为比较难，但是先把animation这个属性通过firebug禁用后，发现原来原理并不是很复杂，只是运用了border，border-radius和box-shadow，然后给就是rotate的animation。第二个和第一个原理一样，只是设置的border-color四个值不一样罢了。而第三个则是使用不同的延迟时间引发scale的动画。至于暂停按钮则是通过js来添加stop这个class，stop则设置了animation-play-state:paused;

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

这个进度条是应用css3的渐变背景做出来的，然后应用background-size属性设置大小，然后以这个size为单位平铺。分析的时候你可以先禁用animation这个动画，然后可以用firebug设置background-repeat:no-repeat;来查看它一个单元的渐变背景。得到非动画的原理，我们再来研究动画部分，背景图片的运动，当然是用background-position了。

这是第一个纯css3的loading动画。这个demo的技巧在于先通过:before生成一个外围，这样就形成了两个圆圈，还是以前虚线框里面说的通过上下左右定位为-20px来扩大的外围的圆圈，这些都是静止的。正在运动的其实是一个空span标签设计出来的一个三角形，这里设置的颜色与背景色一直，所以看不出来，其实你可以设置为红色方便观察，就明白了。最后就是animation的运用了。

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

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

第一个使用的是border为虚线，再加上box-shadow来模拟外面的框；第二个使用的:before方法生成一个虚线框，这里注意的是生成的内容定位上下左右各为3px，确定了这个生成内容的大小,另外需要注意的是注意before内容的层级，小心覆盖了你里面的内容，你可以设置background为一个颜色，就知道层级了；第三个是使用的是border和outline方法。outline不支持单边设置，也不支持圆角，所以比起border来outline很是不足啊。