本实例的tabs斜角效果跟border没有一毛钱关系了，呵呵也跟:before和:after没有关系，却是运用了渐变背景制作的。给了一个角度的渐变，由transparent到红色的220度渐变。然后设置了一个box-shadow的左右偏移为负，使右侧看起来颜色比较深。

说起来惭愧，这个实例以前看起来的时候，看得莫名其妙，一时云里雾里。于是静下心来仔细研究下，才终于发现这个窍门。这里我们看到的选项卡tabs标题的高度并不是由height来撑起来了，各位firebug就可以知道了，设置的height是为0，然后line-height为30px，其实这个还不是关键，关键在于设计了border-bottom为30px。至于上面的那个斜角效果则是border-right为transparent。鼠标滑过的颜色是通过改变border-bottom-color来改变的，至于重叠的部分则是用了margin-right为负值。没有:before&:after一样拿下斜角效果。不得不说这又是border的一个杰作，加上上一个实例，不得不感叹我们对于这个border生成三角形的效果运用还是太基础啊，人家这才是高水平的应用。

本实例主要是对:before,:after和rotate的应用。其实神来之笔在于对border的应用，一般来说我们经常会使用宽高为0，然后再运用border来设计一个三角出来，可是这里是应用border三角和一个宽度或高度的结合，设计出来了我们看到的向上折叠的效果。正好:before生成一个同色的向上折叠，:after生成一个阴影色的旋转下的折叠。

看到该实例标题的时候，表示心情十分激动然后再加上一点忑忑，因为以前看过类似的，但是都比较有缺憾，不那么完美。可是这个媲美从前所有的纯css3打造的滚动效果，可以堪称完美了（除了没有导航控制）。只因制作巧妙精美，所以我只表示欣赏而不好加以评论，感兴趣的话大家还是自己手动研究下为好。

本实例共有五个鼠标滑过的动画效果，但其实原理都是差不多。第一个是多加了一个空白的标签，来显示那个遮罩的三角形；第二，三，四都是对却是用border来生成的遮罩，至于第五个效果就比较复杂，不过原理都是一样的，实际应用也不需要那么复杂。所以只需把前面四个简单的学会了，第五个就当做欣赏吧，扩大自己的视野，以后举一反三的机会多的是。说到底，transition的动画变换来变换去，都是那么几个属性，关键在于对基本属性的把握及对动画效果的设计，多看点效果积累点，以后也可以做到得心应手。

这种实例其实在css3刚出的时候就比较风靡了，也算是入门级的很好实例吧，还是很值得去练练手的。它主要是对css3的:before和:after的应用，当然再加上一些rotate的旋转及box-shadow的阴影，最后配以:hover来达到动画的效果。由于webkit内核不支持:hover之后其他元素的动画效果（如:hover:before；:hover *；:hover + *），所以该实例用webkit内核浏览器来看，鼠标滑过直接就到生硬的最后状态，没有动画过程。

本实例主要是对css3的:target这个选择器的应用，通过:target这个状态来改变需要改变的元素。主要就是在设计html结构的时候得想一下，各个点击的href值对应各自要展开内容的id值。最有可能迷惑的就是:target这个选择器的运用，刚接触的时候还是有些晕的，多看看理解理解就好了。

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

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

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