CSS渐变-动画

1.线性渐变

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

2.径向渐变

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

3.动画-过渡

过渡：

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

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

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

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

4.动画-变形

transform: translate(80px,0px);

平移 translate

第一个值是 横向偏移量

第二个值是 纵向偏移量

旋转 角度的单位

transform: rotate(-30deg);

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

 改变位置

top left bottom right center 两两组合使用

transform: translateY(50%) scale(0.5,0.5);

倾斜

transform: skew(-30deg);

transform: skewY(-30deg);