两个css3背景运动实例，一个是图片，一个是渐变。关键点就在于定义背景的位置，使之可以循环往复，注意衔接地方不要出现中断啊。这个对不支持的浏览器降级也可以很优雅，第一个就是背景的平铺，至于第二个也可以设置一个背景，或者直接设置一个border-top什么的都可以。

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

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

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

本实例主要是对:before及:after的应用，比较初级，浅显易懂，适合入门。第一个使用border-left和负margin，跟css3没有关系，就是应用了rgba这个属性，使border的颜色有一定的透明值；第二个运用:before和:after生成两个三角叠加起来；第三个背景应用了linear-gradient，然后加上:before和:after生成的三角左右两边各一个；第四个则应用了:after生成元素，然后box-shadow生成阴影，再加上rotate旋转一点角度。这四个虽然比较简单，但是还是非常实用的。

今天在《Web页面的纹理背景设计与资源》一文中向大家推荐了一些有关于Web上的纹理背景资源以及制作工具等，其中Lea Verou大师使用纯CSS3制作的纹理背景最吸引我，于是我花了几天的时间整理了一份37种CSS3制作的纹理背景图。这份DEMO能兼容Webkit和Firefox浏览器，其他浏览器没有测试（Lea Verou只能在firefox显示正常），虽然很多代码是copy了Lea Verou大师的，但还是从中学到了不少东西，最起码对CSS3的渐变和背景尺寸等属性有了进一步的了解与加深，现在整理出源码与大家分享。希望大家喜欢。

本实例通过:before和:after生成高度和宽度透明度都为0且背景为渐变的两个内容，两个不同点在于绝对定位的位置一个为left，一个为right，然后渐变背景的方向刚好相反；最后当鼠标滑过改变高度宽度及透明度，就完成了该动画。因为是对:hover状态下的:before和:after生成的内容进行宽度变化，所以该实例如同先前的那个:hover状态下的激发伪元素动画一样，webkit内核是不支持的。