前端基础（10）:CSS3 2D

学习目标

• 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：（先加速后减速）