大神勿喷，这是小弟自己学习的痕迹。
CSS3动画效果核心代码
1 @keyframes slideLeft { 2 0% { 3 left: -500px; 4 } 5 100% { 6 left: 0; 7 } 8 } 9 @keyframes slideBottom { 10 0% { 11 top: 350px; 12 } 13 100% { 14 top: 0; 15 } 16 } 17 @keyframes zoomIn { 18 0% { 19 transform: scale(0.1); 20 } 21 100% { 22 transform: none; 23 } 24 } 25 @keyframes rotate { 26 0% { 27 transform: rotate(-360deg) scale(0.1); 28 } 29 100% { 30 transform: none; 31 } 32 }
技术名词
1.height:auto 与 height: 100%
height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。
2. z-index （参考自 http://www.cnblogs.com/dolphinX/p/3262469.html）
z-index是针对网页显示中的一个特殊属性。
因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。
为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
z-index值 较大 的元素将叠加在z-index值 较小 的元素之上。
对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
★ 只对定位元素有效
z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），
用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。
3.伪元素 ::after 和 ::before
::after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。
虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示
::before跟::after完全类似，只是它插入的内容会出现在其它内容之前。
这两者的区别可以简单描述为：
想让插入的内容出现在其它内容前，使用::before，否者，使用::after。
在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。
content的值可以为：
字符串： content: "字符串"; – 特殊字符串需要转义或unicode编码。
图片：content: url(/path/to/image.jpg); – 图片会按原尺寸大小的插入，不能改变，因为渐变色实际上也是图像，所以，这些伪元素里也可以使用渐变色。
空： content: ""; – 可以用于清除左右浮动元素，也能够用于使用背景图片(这是可以设置高和宽，甚至使用background-size。)
计数器： content: counter(li); – 在列表时计算行数非常方便。
需要注意的是，你不能用它们插入HTML(至少这些HTML代码会被转义输出)。content: "<h1>nope</h1>";
4.background-size: length | percentage | cover | contain;
一：length
该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;
二：percentage
该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;
三：cover （通常用于图片自适应缩放）
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
四：contain
把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。
实际静态效果图如下（图片引自空中网）
