渐变的知识和动画总结

1..线性渐变linear-gradient

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

1.支持多颜色渐变
2.支持方向 to top、to left、to bottom、to right、to bottom left、to top right等

background: linear-gradient(to top,red,green,yellow);

3.支持角度

 background: linear-gradient(0deg,red,green);

4.镜像渐变radial-gradient

 background: radial-gradient(red 0,yellow 10%,blue 30%);

o-10%是red到yellow的渐变 10%-30%是yellow到blue的渐变 其余是blue

2.当是矩形时，一般渐变的椭圆，加上circle强行变圆 ：

background: radial-gradient(circle,red,yellow,blue);

3.控制圆点位置、渐变的大小

background：radial-gradient（40%60%，closest-side，red，blue）

两个百分比控制圆心，closest-side最近的边；farthest-side最远的边；closest-corner最近角；farthest-corner最远角

background：-webkit-radial-gradient（40%60%，closest-side，red，blue）

-webkit-请求内核的需求才可以改变圆心
火狐的是加上-moz-

5.重复渐变repeating

 background:repeating-radial-gradient(red,green 10%,blue 20%);

3.动画transition

 transition: all 2s linear 2s;

transition加在需要改变的盒子或者元素上
transition：all所有属性，2s动画时间，linear匀速 2s延迟操作，变化只有一个或者all
注意：
trasition不支持的属性：display：none/black，不过有设置方法
先设置

transition：all 1s；
height：0；
overflow：hidden；

需要设置溢出隐藏 因为如果ul设置为0但是li还是有内容会撑开ul 所以得设置溢出隐藏
再设置

div：hover{
height：100px}

把动画属性拆成单一属性
单一属性：
all----单一属性：transition-property：检索参与过度的属性
5s----单一属性：transition-duration：对象过渡的持续时间
3s----单一属性：transition-delay：延迟的时间
linear---单一属性：transition-timing-function 过渡的动画类型

4.移动：transform

transform: translateX(50px)
div : hover {
transform: translateX(100px)   
translateY(100px);
}

x一开始就移动50px 等到鼠标移上去之后再往x轴移动100px，y轴移动100px
注意：
当用定位postion定位和transform：translate时候，频繁的改变left top等值，会造成浏览器回流重排，造成浏览器对图层进行重新排列。而transform不会，因为transform为独立图层，是作为合成图像发送给gpu，由显卡渲染。执行效率快。

5.缩放：transform：scale（）

transform: scale(1.5);

默认是1 小于1是缩小 大于1是放大 负值是倒着放大或者缩小
只支持x轴缩放 scaleX
只支持y轴缩放 scaleY

可以改变缩放中心点的位置：

transform-origin: top left;

6.旋转：transform：rotate（）

transform：rotate（deg）

绕着中心点转等于是绕着z轴来转rotate

7.8.倾斜

 transform:skewX(30deg)

拉着右下角往右边拉动 负值同理

 transform: skewY(30deg)

拉着右上角往右边拉动

 transform: skew(30deg,30deg)

正值 拉着右下角，往右下边拉动