2021-05-26

渐变和2d

线性渐变 属性：background

属性值：linear-gradinet(参数)；线-变化；

参数 方向 ；颜色最少给两个 ，每一个参数都要用逗号隔开 ；

有兼容问题，需要加浏览器前缀，工作中一般不考虑，第一个参数to+空格 （结束的位置）；

从一个角到另一个角 to+空格 结束的角 deg角度值 45deg;

考虑兼容问题的写法 从一个边到另一个边不能加to，直接书写开始的方向；角度 用90-标准写法deg；

径向渐变 属性background

属性值：background-radial-gradient（参数）

参数：渐变起点位置、 渐变形状、 渐变大小、 颜色值（最少俩）；

重复渐变：background：repeating-linear-gradient（参数）

颜色后面要加百分比 ，表示要占的大小；

clsest最近边 farthest-side最远边 

/形状和大小是有冲突的/ 不能用逗号隔开，需要用空格隔开。

---

transform:rolate 给对象去加 控制一种元素从一种状态过渡另外一种状态

transition-property:all;

参与过渡：all或者不写，默写全部属性都参与；

transition-duration;过渡的时间单位 s ms；

transition-delay 延迟时间

transition -timine-function ; 默认方式ease  先加速后减速；linear 匀速；ease-in-out 先加后减；

transition：all 1s;

验证过渡的默认方式；

---

2d

属性 transform

属性值 

• 位移：transform:translate(参数)；参数可以有x y 两个值但需要用逗号隔开；
• 缩放 ： transform：scale(参数)；两个参数 ，数字表示倍数，倍数相同则一个参数就可以表示；scalex()表示x轴上宽度的变化 scale有（）表示y轴上高度的变化；

1. 小于1 表示缩小
2. 大于1 表示放大
3. 等于1 表示不变
4. 等于0 图像消失
5. 小于0 先消失后放大到后面的数值倍数，旋转180deg;

transform -origin:变形原点

默认center

值 top right  bottom left;

旋转transfrom :rotate(角度值)deg

注意只有一个参数，可为正为负，正数顺时针旋转，负数逆时针旋转，默认围绕z轴旋转；

倾斜 transform：skew (参数deg)

参数x y 与y轴参生的角 与x轴产生的角；

当属性相同的时候 

transform:translate() rotatr();

先写位移后写其他函数 （工作需求）