渐变&2d

**渐变&2d**      

渐变的概念

渐变是由浏览器生成解析的

背景图片

属性：background

线性渐变

径向渐变

重复渐变

线性渐变

属性：background

属性值：linear-gradient（参数）

第一个参数表示方向值（可选参数）

第二个参数表示颜色1

第二个参数表示颜色2

.。。。

注意：

第一个参数方向值是有默认值的（默认从上到下）可以不设置

多个参数之间用逗号隔开的

线性渐变是有兼容问题的（兼容写法）

第一个参数的使用：方向值

1.从一个方向到另外一个方向 to+结束方向

2.从一个角到另外一个角 to+结束的角度（水平+垂直）

3.角度值（单位是deg）

兼容写法：需要加浏览器前缀

关于兼容写法的方向值问题 和标准写法区别

从一个方向到另外一个方向 开始的方向值

从一个角度到另外一个角 开始的角度

角度值（单位是deg） 90deg 标准的角度值

总结：

浏览器的发展 可以不考虑兼容写法

在工作中 线性渐变的需求 一般都是设置导航的背景色

标准写法：background：linear-gradient（颜色1，颜色2）

径向渐变

径向渐变的属性：background

属性值：radial-gradient

第一个参数表示起点的位置

默认是容器的中心

方向值 水平方向/垂直方向

value值（坐标值）

第二个参数表示渐变的形状

默认是椭圆形

圆形 circle

第三个参数表示渐变的大小

设置渐变的大小 和 形状是有冲突的

设置大小和形状的时候 两个参数之间不能用逗号 需要用空格

第四个参数表示颜色1

第五个参数表示颜色2

总结：

在工作中很少使用径向渐变

background：radial-gradient（颜色1，颜色2）

重复渐变

重复线性渐变：background：repeating-linear-gradient（）

重复径向渐变：background：repeating-radial-gradient（）

过渡的使用

过渡属性：

过渡是控制元素从一种状态到另外一种状态变化过程（none-block 不可以使用过渡）

过渡的属性

1.设置参与过渡的属性 transition-property（属性）

在后面填写参与过渡的属性即可 多个属性之间用空格隔开

常用一个英文单词来表示all 或者是不写（默认就是全部属性参加过渡）

2.过渡的时间 transition-duration

s 秒 ms 毫秒 最佳0.8s

3.过渡的延迟时间 transition-delay

4.过渡的运动方式 transition-timing-function

默认方式为ease；

简写方式

属性：transition

属性值：属性 时间 延迟 方式

css3中2D的位移

属性：transform

属性值：

translate（两个参数）水平垂直方向的值

translateX（方向值）

translateY（方向值）

位移不会让元素脱离文档流

缩放

属性值（功能函数）：scale（参数）

scale（宽，高）宽度和高度值相同时，可以简写成一个

小于0 元素先变成0 然后变成设置的倍数（元素沿着顺时针旋转180deg）

等于0 隐藏

大于0 小于1 缩小

大于1 放大

scaleX（）宽度

scaleY（）高度

旋转

属性值：rotate（一个参数）

参数是正值：沿着顺时针旋转 参数是负值 沿着逆时针 默认是沿着Z轴旋转

参数的单位是deg（角度）

rotateX（）单杠运动 观察的时候都是从正轴方向观察 正值都是顺时针 负值都是逆时针

rotateY（）钢管舞，旋转木马

倾斜

属性值：skew（两个参数）

skewX/Y（）