1. CSS3之过渡属性（transition）

过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或javascript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态。可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持但是不会影响页面布局。

我们现在经常和 :hover 一起，搭配使用。

语法：

transition : 要过渡的属性 花费时间 运动曲线 何时开始;

1. 属性：想要变化的css属性，宽度，高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
2. 花费时间：单位是秒（必须写单位）比如0.5s。
3. 运动曲线：默认是ease（可以省略），linear匀速，ease逐渐慢下来，ease-in加速，ease-out减速，ease-in-out先加速后减速。
4. 何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以省略）。

简单的例子如下，页面中有一个盒子：

<div></div>

我们给这个盒子增加过渡，让这个盒子的宽度从100px增加到400px，配合hover一起使用，css如下：

div {
    height: 200px;
    width: 100px;
    background-color: skyblue;
    /*transition: 变化的属性 花费时间 运动曲线 何时开始*/
    transition: width .5s linear 1s;
}
div:hover {
    width: 400px;
}

若我们想给过渡添加多个属性时，例如同时改变盒子的高度和宽度，具体语法格式为：

div {
    height: 200px;
    width: 100px;
    background-color: skyblue;
    /*transition: 变化的属性 花费时间 运动曲线 何时开始*/
    transition: width .5s linear 1s, height .5s linear 1s;
}
div:hover {
    width: 400px;
    height: 400px;
}

写在一行，用逗号分隔即可，也可以写all。记住：谁做过渡给谁加

2. CSS3渐变特性（gradient）

CSS 渐变是 CSS3 图像模块中添加的新类型的图像。CSS 渐变允许您在 两个或多个指定颜色之间显示平滑过渡。 浏览器支持两种类型的渐变：

• 线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向，用 linear-gradient() 函数定义
• 径向渐变（Radial Gradients）：由它们的中心定义，用 radial-gradient()函数定义

语法：

background: linear-gradient(direction, color1, color2, ...);

• direction:指定了颜色过渡的方向，不写默认为从上到下，值可以为to bottom, to top, to right, to left, to bottom right等。
• color：可以有多个color值，指定了颜色变化的范围。

3. CSS3的其他特性

3.1 calc 函数

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。例如，我们的需求是让子盒子宽度永远比父盒子小30像素。

<div class="father">
    <div class="son"></div>
</div>

css可以利用calc() 设置成如下：

.father {
    width: 300px;
    height: 200px;
    background-color: skyblue;
}
.son {
    width: calc(100% - 30px);
    height: 30px;
    background-color: antiquewhite;
}

calc() 支持+ - * /。

3.2 图片模糊处理（filter）

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

语法：

filter: 函数();  例如：filter: blur(5px); blur模糊处理，数值越大越模糊。