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)
正值 拉着右下角,往右下边拉动