h5 day13笔记 2021.09.01

css3渐变：

1.   线性渐变

background/background-image：linear-gradient（参数）

--参数1表示方向，参数2表示颜色，参数3表示颜色.........（参数间以逗号隔开）

--线性渐变有兼容写法，属性值前加浏览器前缀（如background: -webkit-linear-gradient(bottom,red,green);）

--参数1方向的设置（默认值是从上到下）：

1)标准写法（常用）

- 从一个边到另外一个边(top=>bottom) to 结束的方向值

- 从一个角到另外一个角(left top) to 结束的方向值

- 角度值 deg 设置角度值即可

2)兼容写法

- 从一个边到另外一个边 开始的方向值 不要加to

- 从一个角到另外一个角 开始的方向值 不要加to

- 角度值 90deg减去标准写法角度值

径向渐变：

background：radial-gradient（参数）

--参数1渐变起点位置（默认为盒子中心点，可设为水平、垂直方向任意值），参数2渐变形状（ellipse椭圆，circle圆形），参数3渐变大小（ closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角），参数4颜色，参数5颜色..........

重复渐变：

background: repeating-radial-gradient(#000 5%,#fff 10%);

过渡属性：transition

transition-property：参与过渡的属性（属性间用空格隔开，不写默认全部，也可使用all）

transition-duration：过渡的持续时间（单位s  ms）

transition-delay：延迟过渡的时间（单位s ms）

transition-timing-function：过渡的速度类型（默认ease先快后慢，linear匀速......)

简写  transition：持续时间  速度类型；

位移：

transform：translate（x，y）  只写一个值时默认x轴，y轴为0

-- translateX/Y（一个参数），可为正、负，位移不脱离文档流

控制元素再浏览器中移动的属性：定位、盒模型、浮动、位移；

缩放：

transform：scale（x，y）  表示宽高，宽高相同时可简写成一个

--scaleX/Y   变化从中心点center开始

--参数：<0 表示先变0 后放大当前数字的倍数且旋转180； =0 表消失； 0<?<1缩小； =1 不变；  >1 放大；

旋转：

transform：rotate（角度值deg）不接轴向时默认Z轴

--rotateX/Y 参数为正表示沿顺时针，参数为负表示沿逆时针；

倾斜：

transform：skew（x、y）

变形原点：

transform-origin：方向点   （只有设置了transform属性时才起作用）

如transform-origin:left top   围绕左上点变形