css渐变与动画

  线性渐变 

            background: linear-gradient(red,yellow,blue); 

            background: linear-gradient(to right,red,yellow,blue); 

            background: linear-gradient(to right bottom,red 20%

  平铺 

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

,yellow 60%,blue );

  

径向渐变

           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);

  过渡：

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

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

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

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

平移 translate

                第一个值是 横向偏移量

                第二个值是 纵向偏移量

平移之后占位状态不变

transform: translate(60px,100px);

旋转 角度的单位

transform: rotate(-30deg);

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

transform: scale(0.6);

改变位置

top left bottom right center

            两两组合使用

transform-origin: right center;

倾斜

transform: skew(-30deg);

关键帧

 @keyframes name {}