CSS3渐变、过渡、2d变换

CSS3渐变、过渡、2d变换

1.渐变（gradient）

1.1线性渐变（linear线性）

写法（一）：

background:gradient(linear,起点（水平 垂直），终点，color-stop(开始渐变的位置，颜色) );

注：color-stop(开始渐变的位置，颜色) , ...后面可以连着写多个值。

写法（二）：         

background:-webkit-linear-gradient(方向||角度（deg），颜色 开始渐变的位置)

 background:-webkit-linear-gradient(top,red 10%,blue 50%,purple 80%);

1.2径向渐变

写法（一）

 background:-webkit-radial-gradient(圆心，颜色 渐变开始的位置)

例：background:-webkit-radial-gradient(0 0,red 5%,purple 50%,pink 80%);

            

写法（二）

渐变的形式：circle圆 ellipse椭圆形

渐变的大小：closest-side：最近边； farthest-side：最远边；

closest-corner：最近角； farthest-corner：最远角（默认值）

 

background:-webkit-radial-gradient(圆心，渐变的形式||渐变的大小，颜色 渐变开始的位置)

例：background: -webkit-radial-gradient(center,circle farthest-side,red,blue);

1.3渐变重复

background:-webkit-repeating-形式-gradient()  重复渐变

2 过渡 （transition）

2.1过渡的属性transition-property

2.2过渡的时间transition-duration

2.3过渡的形式 transition-timing-function

linear线性 ease慢进慢出   ease-in慢进  ease-out慢出

2.4transition-delay  过渡的延迟

3 2d变换（平面变换）

3.1 移动2d（translate）

连写：Transform：translate( x , y ); 注：跟relative 相似

单写：Transform：translateX ||Y( 数值 || 百分比 );

3.2 缩放2d（scale）

值大于1，代表放大的倍数。值小于1，缩小。缩放的中心点在元素中间

transform:scale(x,y) 缩放变换

transform：scaleX(x) transform：scaleY(y) ;

3.3 旋转2d（rotate）

transform:rotate(角度) 旋转变换

顺时针为正，旋转的中心点在元素中间

transform-origin改变变换的中心点

transform-origin:100% 100%;

3.4 扭曲 2d（skew）

transform:skew(xdeg,ydeg) 扭曲变换，改变的是图形的形状transform:skewX(角度); transform:skewX(30deg) skewY(30deg);

注意：会有覆盖现象，所以多个属性值写在一起