写法(一):web
background:gradient(linear,起点(水平 垂直),终点,color-stop(开始渐变的位置,颜色) );ide
注:color-stop(开始渐变的位置,颜色) , ...后面能够连着写多个值。spa
写法(二): orm
background:-webkit-linear-gradient(方向||角度(deg),颜色 开始渐变的位置)ip
background:-webkit-linear-gradient(top,red 10%,blue 50%,purple 80%);ci
写法(一)it
background:-webkit-radial-gradient(圆心,颜色 渐变开始的位置)io
例:background:-webkit-radial-gradient(0 0,red 5%,purple 50%,pink 80%);function
写法(二)form
渐变的形式:circle圆 ellipse椭圆形
渐变的大小:closest-side:最近边; farthest-side:最远边;
closest-corner:最近角; farthest-corner:最远角(默认值)
background:-webkit-radial-gradient(圆心,渐变的形式||渐变的大小,颜色 渐变开始的位置)
例:background: -webkit-radial-gradient(center,circle farthest-side,red,blue);
background:-webkit-repeating-形式-gradient() 重复渐变
linear线性 ease慢进慢出 ease-in慢进 ease-out慢出
连写:Transform:translate( x , y ); 注:跟relative 类似
单写:Transform:translateX ||Y( 数值 || 百分比 );
值大于1,表明放大的倍数。值小于1,缩小。缩放的中心点在元素中间
transform:scale(x,y) 缩放变换
transform:scaleX(x) transform:scaleY(y) ;
transform:rotate(角度) 旋转变换
顺时针为正,旋转的中心点在元素中间
transform-origin改变变换的中心点
transform-origin:100% 100%;
transform:skew(xdeg,ydeg) 扭曲变换,改变的是图形的形状transform:skewX(角度); transform:skewX(30deg) skewY(30deg);