CSS渐变和动画

渐变

线性渐变（linear-gradient()）

/*两色渐变默认方向*/background-image:linear-gradient(color1,color2);
/*两色渐变方向改变*/background-image:linear-gradient(to right,color1,color2);
background-image:linear-gradient(to right bottom,color1,color2);
/*两色渐变使用度数改变方向*/background-image:linear-gradient(70deg,color1,color2);
/*、多色渐变*/background-image:linear-gradient(color1,color2,color3……);
/*、渐变改变方向与填充%与px*/background-image:linear-gradient(70deg,color1 20%,color2 30%);
background-image:linear-gradient(70deg,color1 20px,color2 30px);

径向渐变（radial-gradient()）

/*默认，第一个色为圆心色*/background-image:radial-gradient(red,blue,orange);
/*默认，圆形圆心*/background-image:radial-gradient(circle,red,blue,orange);
/*默认，椭圆圆心*/background-image:radial-gradient(ellipse,red,blue,orange);
/*默认，椭圆圆心 从顶部开始*/background-image:radial-gradient(ellipse at top,red,blue,orange);
/*默认，椭圆圆心 像素为大小*/background-image:radial-gradient(ellipse 50px,red,blue,orange);

动画

2D变形：

缩放

1. scale（）让元素在水平和垂直方向同时缩放。
2. scaleX（）让元素仅在水平方向缩放。
3. scaleY（）让元素仅在垂直方向缩放。
   注意：scale函数的默认值为1。缩小范围值在0.01~0.99之间，而放大范围则是等于或者超过1.01的数都可以。

transform: scale(0.9); 
transform: scaleX(0.9); 
transform: scaleY(0.9); 

平移

1. translate();平移，传进 x,y值，代表沿x轴和y轴平移的距离
2. translateX();
3. translateY();

transform: translate(100px,-300px);
transform: translateX(-300px);
transform: translateY(-300px);

倾斜

1. skew() 单位deg度数的意思
2. skewX()
3. skewY()

transform: skew(10deg,10deg);  
transform: skewX(10deg);  
transform: skewY(10deg);  

旋转

rotate（n deg） 旋转多少度

transform: rotate(0deg);

基准点

transform-origin:right bottom;

过渡

transition:2s

动画帧

from从……来

to……到什么地方

@keyframes name {
    from{

    }
    to{
        top: 300px;
    }
}

使用动画帧：

animation: 名字 时间 速度曲线 循环 方向;