1、通过控制css属性来达到动画的目的，@kefframes
在css中通过定义一个@keyframes 运动效果的名称，然后再通过animation来调用运动效果的名称实现动画
第一步：
@keyframes animation{ from{ background:red; } 30%{ background:blue; } to{ background:yellow } };
第二部
在css文件中找到需要调用动画参数的元素，设置：
animation-name:change; //设置动画名称
animation-duration：3s //设置动画时间周期
animation-iteration-count:6 //设置动画循环次数
animation-iteration-count:infinite;设置动画无限循环
2、线性渐变
background：linear-gradient(to right,blue,red，yellow);
to right可以是35deg，或者是to bottom，颜色可以写多个
background:liner-gradient(red 30%,green30%,yellow 60%);
可以设置百分百，百分比代表颜色相对于元素的百分比位置，而不是颜色占比
3、经向渐变
background:radial-gradient(cricle,red,blue,yellow);
cricle是设置渐变以圆型扩散
background:radial-gradient(at 30px 40px,red,blue,yellow);
at是设置经向渐变时圆心的位置（相对于元素）；
background:radial-gradient( 100px 30px,red,blue,yellow);
不写at直接写数字，是代表横轴渐变和纵轴渐变的大小
4、transfrom属性（变换）
位移：
transfrom:translate(100px,100px);
横向和纵向移动100px的距离，可以为负值
旋转：
transfrom:rotate(45deg);
默认围绕Z轴旋转45度
transfrom-origin:top left;
transfrom:rotate(80deg);
围绕左上角旋转80度。
缩放：
transfrom:scale(1.5);
元素放大1.5倍
倾斜：
transfrom:skew(45deg);
沿x轴倾斜45度
