渐变

1 线性渐变

background: linear-gradient(direction, color-stop1, color-stop2, ...);

一般是在方向前加 to

2镜像渐变

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。

3.重复性渐变

宽高设置为百分比

过渡

1. transition-property： 检索或设置对象中的参与过渡的属性

2. transition-duration：   检索或设置对象过渡的持续时间

3. transition-delay：   检索或设置对象延迟过渡的时间

4. transition-timing-function：检索或设置对象中过渡的动画类型

5.简写 transition ：0.8s  0.8s(过度时间和延时时间)

2D

transform

1.transform: translate () 位移

2. transform:scal()  缩放

3. transform: rotate（）旋转

4.transform: skew(）倾斜 默认为Z轴，【30deg（30度）】