css动画和渐变

1. 渐变色

background-image：linear-gradient(开始位置 角度，起始颜色，终止颜色 )
可自行添加百分比/长度/left、right、top、bottom（可组合使用）
也可以添加多种颜色进行排版

2.径向渐变(放射渐变)

background: radial-gradient(形状 发散方向，起始颜色，终止颜色)
形状默认的是椭圆ellipse，圆形circle，发散方向：left、right、top、bottom（可组合使用
大小半径可以使用像素或关键字表示

3动画效果transform：2D变形

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长
转换的方法：translate()/rotate()/scale()/skew()/matrix()

或拉伸translate(x,y) 是 2D 平移转换
translateX(x) 是以X轴为中心平移一定距离
translateY(y) 是以y轴为中心平移一定距离

4.倾斜 skew

 skew(x轴,y轴)定义沿着 X 和 Y 轴的 2D 倾斜转换
kewX(angle) 定义沿着 X 轴的 2D 倾斜转换
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换

5. 缩放scale

scale(x,y) 定义 2D 缩放转换
scaleX(x) 通过设置 X 轴的值来定义缩放转换
transform：3D 变形：
transform：3D 变形可以近似理解为沿着 Z 轴移动元素，使得元
素更加靠近或者远离你，从而使元素看起来变得更大或更小。
 transform：3D 变形函数
o translate3d(x,y,z) 定义 3D 转换。
o translateY(y) 定义转换，只是用 Y 轴的值。
o translateX(x) 定义转换，只是用 X 轴的值。
o translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
o rotate3d(x,y,z,angle) 定义 3D 旋转。
o rotateX(angle) 定义沿着 X 轴的 3D 旋转。
o rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
o rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
o scale3d(x,y,z) 定义 3D 缩放转换。
o scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
o scaleX(x) 通过设置 X 轴的值来定义缩放转换。
o scaleY(y) 通过设置 Y 轴的值来定义缩放转换。