day16

1 背景渐变 ：background或background-img

线性渐变 background：linear-gradient(位置，颜色。。。)

background:repeating-linear-gradient(位置，颜色1 起始，颜色1 结束，颜色2 起始，颜色2 结束)

颜色2的起始是颜色1的结束

径向渐变 background:radial-gradient(位置，颜色。。。)

background：repeating-radial-gradient(位置，颜色1起始，颜色1结束，颜色2起始，颜色2结束)

颜色2的起始是颜色1的结束

2 兼容的前缀

-webkit- 谷歌 苹果

-moz- 火狐

-ms- ie

-o- 欧朋

3 过渡属性 transition 复合属性

哪个属性存在过度 默认all

过度的时间

延迟执行时间

运动形式 steps（步骤） 逐帧动画

注意点：不支持display;none 和display:block,对背景颜色的支持可以，但是对背景颜色的渐变不是太好

4 景深 perspective

定义：你在多远的位置看事物

值越大效果越小

使用方式： 1 写给父元素 perspection：值

2 写给元素本身 transform:perspective(值)

5 旋转 rotate

rotatex(角度)

ratatey(角度)

ratatez(角度)----ratate(角度)

rotate3d(x,y,z) x,y,z 1 是旋转，0不旋转

默认是从中心旋转，可以通过transform-origin更改旋转基点

值1 left right center 具体的数值

值2 top center bottom 具体的数值

内容会跟着旋转

6 缩放 scale （缩放倍数）

值 正值 ：正常的缩放倍数

负值：翻转缩放的倍数

比1大就是放大，比1小就是缩小

默认是从中心向两端缩放，可以通过transform-origin更改缩放基点

值1 left right center 具体的数值

值2 top center bottom 具体的数值

scalex(倍数) scaley（倍数） scalez(倍数) scale（倍数）代表x y

scale(x,y) scale3d(x,y,z)

内容会跟着缩放