css渐变，动画

渐变

线性渐变

 background: linear-gradient(red,yellow,blue);
background: linear-gradient(to right,red,yellow,blue); 
background: linear-gradient(to right bottom,red 20%,yellow 60%,blue );
background: linear-gradient(10deg,red,yellow,blue);

 平铺

background: repeating-linear-gradient(30deg,red 20px,yellow 40px);

 径向渐变

background: radial-gradient(red,yellow,blue);
background: radial-gradient(circle,red,yellow,blue);
background: radial-gradient(circle at top left,red,yellow,blue);
background: repeating-radial-gradient(circle at top ,red 40px,yellow 60px);

平移translate

第一个值是 横向偏移量   第二个值是 纵向偏移量

transform: translate(60ox,100px);

旋转 角度的单位

transform: rotate(30-deg);

缩放 默认值是 1 小于1就是缩小，大于1就是放大

 transform: scale(0.6);

改变位置

 top left bottom right center;   

两两组合使用

transform-origin: right center;
transform: translateY(50%)scale(0.5,0.5);
transition: 5s;

 倾斜

transform: skew(-30deg)

nimation: name 2s linear;

 关键帧

 @keyframes name{
            10%{
                width: 200px;
            }
            20%{
                width: 300px;
            }
            40%{
                width: 500px;
            }
            100%{
                width: 200px;
            }
        }

过渡：

  第一个值是属性 一般是all, 也可以是其他属性名称

 第二个值是时间 单位是时间单位 通常是s

第三个值是 过度速度 linear匀速

可以只写时间，其他两个值默认填充all和linear

 transition: all 2s linear