学习代码(CSS动画)

1.渐变色：

a.线性渐变：

background-image：linear-gradient(颜色1，颜色2);
1.从颜色1渐变到颜色2，默认方向为从上到下
2.to 方向,改变方向。支持属性(从左到右(right)从左上到右下(right bottom))
3.在颜色前加 xxdeg，改变渐变的角度为xx度
4.多种颜色渐变为颜色依次从上到下(默认值)渐变
5.可以在颜色后加百分比或者像素来规定颜色的区域
background-image：repeating-linear-gradient(颜色1，颜色2);(重复性渐变)

b.径向渐变

background: radial-gradient(颜色1，颜色2，颜色3)；
1.颜色1一般为圆心
2.circle(默认值，为椭圆)，circle at(正圆)，
circle at 方向(正原的圆心的方向为设置的方向)
circle xxpx(正圆的直径为xx像素)
circle closest-side(椭圆以最长或高最短的一方为直径变为正圆)
background: repeating-radial-gradient(颜色1，颜色2，颜色3)；(重复性渐变)

2.transform：2D变形

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
转换方法:

1.translate(x,y)移动(2D变形)

translatex(xpx)(在x轴移动x像素)
translatey(xpx)(在y轴移动x像素)

translate3D(x,y,z)(3D变形)

2.scale(x)缩放

由原本的大小缩放致x倍

3.rotate(xdeg)旋转

由原本的位置以中心(默认值)为旋转x度
transfrom-origin：方向(默认为(中心)如 right bottom(右下角))

4.skew(xdeg，xdeg)倾斜

由原本的位置倾斜，x轴为第一个数字，y抽为第二个数字

5.matrix()拉长或拉伸

注：transition：xs(动画运行时间为x秒，过渡)