1、 CSS Sprite
CSS中的雪碧图(有的称精灵图)，它可以优化网页的手段，提高加载速度，减少图片的质量，使网页的图片加载速度快，还可以减少图片的请求的次数，加快网页的打开。我们可以通过PS工具中的切片工具，方便在雪碧图中测量所需要图片的位置和大小。当然在我们手中有若干图片时，也可以在线处理雪碧图：http://alloyteam.github.io/gopng这个网站，来快速帮我们生成雪碧图(精灵图)。
2、 超大图居中
在做网站的过程中一般都少不了超大图的居中问题，这里有两种方式，来针对超大图居中问题的解决方案。第一种就是利用背景图来做 : background : center 0;另外一种用定位来做：position:relative; left:50%; margin-left:-容器(图片宽)的一半。第一种方法就不做解释了。现在来解释第二种方法，所谓的position:relative; left:50%，就是先让图片的左边相对所在的容器居中，而margin-left:-容器(图片宽)的一半，便使图片的横向宽的中点与所在的容器的中点对应，这样你不论怎样放大或缩小容器，图片的中点始终与容器的中点重合，这样便做到了超大图的居中。如图所示：
3、 CSS3
CSS3是CSS的最新版本。width height background border 都属于CSS2.1，CSS3 会保留之前 CSS2.1的内容，只是添加了一些新的语法。CSS3 : border-radius :nth-of-type() background-size…
Transition过渡：
transition-property : 规定设置过渡效果的CSS属性的名称。all ( 默认值 ) , 指定width , height;
transition-duration:规定完成过渡效果需要多少秒或毫秒。 需要添加单位：s (秒)/ms (毫秒)；
transition-delay:定义过渡效果何时开始，2s : 延迟两秒进行过渡，-2s : 提前两秒进行过渡；
transition-timing-function : 规定速度效果的速度曲线，运动形式： linear、ease（默认值）、ease-in、ease-out、ease-in-out、cubic-bezie（ http://cubic-bezier.com ）。
复合写法： transition:all 2s linear; √、 transition:linear 2s all; √、transition:2s linear all; √、transition:2s 3s linear all; √。注意：不要把transition放到hover中，因为若是放在hover中的话，只会有鼠标进入的时候有动画，若鼠标离开时，transition就不起作用了。
transform变形：
translate:位移、transform:translate(100px,100px);两个值分别对应x 和 y；transform:translateX(100px)、transform:translateY(100px)、transform:translateZ(100px) ( 3d )；scale :缩放，transform:scale(num) num是一个比例值，正常比例是1。transform:scale(num1 , num2)两个值分别对应w和h：transform:scaleX()、transform:scaleY()、transform:scaleZ() ( 3d )；rotate : 旋转 ：transform:rotate(num)，num是旋转的角度30deg，正值：顺时针旋转，负值：逆时针旋转，角度单位：角度deg或弧度rad、rotateX() ( 3d )、rotateY() ( 3d )、rotateZ()。注 : rotate()跟rotateZ()是等价关系；skew : 斜切transform:skew(num1,num2) : num1和num2都是角度，针对的是x 和 y ，transform:skewX() 、transform:skewY()。这里的skew没有3d写法。注：所有的变形操作，都不会影响到其他元素(类似于相对定位)、变形操作对inline(内联元素)不起作用的、transform可以同时设置多个值、先执行后面的操作，在执行前面的操作。位移会受到后面要执行的缩放、旋转和斜切的影响。
tranform-origin 基点位置 ：
主要是针对旋转和缩放，默认都是中心点为基点。
做特效要确定：起点值和结束值。
套路：
1.先把静态的效果做出来。
2. 把要运动的终点位置先做出。
3. 指定 tranform变形中对应的 0 值 ( 结束点位置 ).
4. 写 tranform变形的起点值 (起点的位置)
2. animation动画
原理：逐帧动画。会把整个运动过程，划分成100份。animation-name : 设置动画的名字 (自定义的)；animation-duration : 动画的持续时间；animation-delay : 动画的延迟时间；animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数；animation-timing-function : 动画的运动形式：ease、linear。
@keyframes 动画的名字 {
from {}
to {}
}
from : 起点位置 , 等价于 0% ；to : 终点位置 ，等价于 100%。注：默认情况下，元素运动完毕后，会停到起始位置。复合样式： animation。
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。 none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效；backwards : 在延迟的情况下，让0%在延迟前生效；forwards : 在运动结束的之后，停到结束位置；both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。alternate : 一次正向(0%100%)，一次反向(100%0%)； reverse : 永远都是反向 , 从100%~0%；normal (默认值) : 永远都是正向 , 从0%~100%。
1、 animate.css ?
一款强大的预设css3动画库。官网地址：https://daneden.github.io/animate.css/
基本使用：
animated : 基类(基础的样式，每个动画效果都需要加)
infinite : 动画的无限次数
如果想改变运动的时间：需要在css文件中改变animated这个样式里的时间。
2、3D效果？
perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。 rotateX、rotateY、translateZ、scaleZ
注：反馈回来的立体，仅限于平面。
transform-style : 3D空间。flat (默认值2d)、preserve-3d (3d，产生一个三维空间)
注：只要是有厚度的立体图形，就必须添加3D控件、在立方体中默认会沿着第一个面进行旋转。
tranform-origin : x y z; (z不能写单词，只能写数字)、perspective-origin : 景深-基点位置，观察元素的角度。backface-visibility : 背面隐藏，hidden、visible (默认值)。rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg， rotate3d(1,1,1,30deg); scale translate skew
background-origin : 背景图的填充位置。默认情况下，如果xy都平铺的话，border padding content 区域都有背景图。padding-box (默认) : 在padding区域开始填充背景图，border-box : 在border区域开始填充背景图、content-box : 在content区域开始填充背景图
background-clip : 背景图的裁切方式。padding-box、border-box (默认)、 content-box。注：当位置与裁切写入复合样式中，那么第一个值表示位置，第二个值表示裁切。
3. CSS3渐变：
线性渐变： background-image:linear-gradient( 20deg , red , blue);
注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。
径向渐变： radial-gradient : 径向渐变
- 字体图标？
font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。你可以想象成一个小图片，其实它不是图片，而是一个字。好处： 可以非常方便的改变大小和颜色：font-size:40px; color:red、放大后不会失真、减少请求次数和提高加载速度、简化网页布局、因为字体图标就是一个内联的元素，所以左右布局非常简单、减少设计师和前端工程师的工作量。用第三方库：www.iconfont.cn
字体图标怎么用？
@font-face{}，所有的自定义的字体都会放到一个文件中： xxx.svg、.eot 、.woff 这些文件主要是用来适配不同的环境或操作系统。
自定义字体图标：https://icomoon.io/app : 在线生成字体图标。 - 文字阴影？
text-shadow
x，y，blur 模糊值，color 阴影面积，多阴影
注：默认情况下，阴影的颜色跟文字的颜色相同。 - 盒子阴影？
box-shadow
x，y，blur 模糊值，color 阴影面积，多阴影，spread : 范围，inset : 内阴影、outset(默认值：外阴影 , 写上outset不会生效，不写就是外阴影)
注：默认盒子的阴影就是黑色。 - 浏览器前缀？
浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式语法还在波动的时候，他们提出了针对浏览器的前缀。Chrome、safari：-webkit-； ie： -ms-； firefox：-moz-；opear：-o-。 - 遮罩?
mask
url，repeat，x，y，w，h。可以多遮罩 - 倒影
box-reflect： above上、below下、left左、right右，距离，遮罩 | 渐变
注：渐变必须是不透明渐变到透明，利用scale为-1实现翻转。
