学习目标
1、渐变
2、过渡
3、2D
1、渐变linear-gradient( to bottom,red,blue)
说明：
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
用法：
1）第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：
2）CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
3）为了添加透明度，我们也可使用 rgba() 来定义颜色结点。
4）repeating-linear-gradient() 函数用于重复线性渐变
5）渐变的形状是 ellipse（表示椭圆） circle （圆）
http://www.colorzilla.com/gradient-editor/
IE浏览器实现渐变只能使用IE自己的滤镜去实现 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃ 00ffff,endColorstr=＃9fffff,grandientType=1); 第一个参数：渐变起始位置的颜色 第二个参数：渐变终止位置的颜色 第三个参数：渐变的类型 0 代表竖向渐变 1 代表横向渐变
2、CSS3 转换
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
在咱们的转换概念当中：是没有display这么一说的，通过改变元素的透明度去实现从无到有
１）、2D转换｛transform：rotate() skew() scale() translate() ；｝
相关值用法：
A、rotate() 旋转函数 取值度数 ,单位：deg
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
B、skew() 倾斜函数 取值度数 (扭曲)，通过 skew() 方法，元素翻转（倾斜/扭曲）给定的角度，
skewX() skewY()
C、scale() 缩放函数 取值 正数、负数和小数，通过 scale() 方法，元素的尺寸会增加或减少，
scaleX()scaleY()
D、translate() 位移函数，元素从其当前位置移动，根据给定的left（x 坐标） 和 top（y 坐标） 位置参数：
translateX()translateY()
２）、旋转的基点｛Transform-origin：top left；｝
允许你改变被转换元素的位置。
3、css3 过渡｛transition：all 5s;｝
说明：
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个 CSS 属性上 规定效果的时长
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，使元素从一种样式变换为另一种样式时为元素添加效果。
相关属性用法：
１）transition-property 要运动的样式 （all || [attr] || none）
２）transition-duration 运动时间
３）transition-delay 延迟时间
４）transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
