渐变与过渡,旋转,位移,缩放

线性渐变 — background: linear-gradient()

通常使用background: linear-gradient(to right, red ,blue) 属性,意思是,向右渐变,红变蓝.

• 其中right属性也可以用right top等表示角落.
• 也可以使用角度表示渐变方向,background: linear-gradient(10deg, red, blue)

径向渐变 — background: radial-gradient()

使用background: radial-gradient(center, shape ,size, start-color,last-color)

• center为渐变的起点位置,默认为正中心,可以使用百分比
• shape为渐变的形状,值为ellipse(椭圆),circle(圆形),默认为椭圆
• size为渐变的大小,有四个值:closest-side(最近边) faster-side(最远边) closest-corner(最远角) faster-side(最远角)

重复渐变 — background: repeating-linear-gradient()

使用background: repeating-linear-gradient(red,green 10%,blue 20%)
表示10%为绿色,20%为蓝色,其他则是红色,他们之间相互渐变.

• 也可以为他们添加角度,来实现倾斜图形的平铺.
• 还可以设置非渐变的颜色组合,如(135deg, green 5%,green 10%, blue 10%, blue 15%)
  
• 同理还可以径向重复渐变background: repeating-radial-gradient(red, yellow 10%, green 20%);

过渡 — transition

过渡允许css的属性值在一定时间内按规律平滑的过渡,可以由点击,选中,悬停,获得焦点等对元素进行改变的动作属性中使用.
语法:transition: property duration timing-function delay
值非别是: 要进行过渡的属性, 过渡持续时间, 速度, 延时生效时间,

• propery: 默认为all ,可以使用width等属性
• duration: 默认为0,
• timing-function: 默认为ease(慢快慢) ,有linear(平缓),ease-in(慢开始), ease-out(慢结束), ease-in-out(慢开始&慢结束) , cubic-bezier(n,n,n) n为0-1
• delay: 默认为0,

位移 — translate

位移允许目标可以在2d或者3d下进行位移
语法:

• transform: translate(x,y)
• transform: translateX()
• transform: translateY()
• transform: translateZ()
• transform: translate3d{x,y,z}

旋转

旋转允许目标可以在2d或3d下进行旋转,中心可以自选

• transform: rotate(deg)默认为x轴
• transform: rotateX(deg)绕x轴旋转
• transform: rotateY(deg)绕Y轴旋转
• transform: rotateZ(deg)绕Z轴旋转
• transform:rotate3d(deg)3d旋转

缩放

缩放允许目标可以在2d或3d下进行缩放,值为0-R

• transform: scale(x,y)对目标进行2d的缩放
• transform: scale3d(x,y,z)对目标进行3d的缩放
• transform: scaleX(x)对目标进行x轴的缩放
• transform: scaleY(y)对目标进行y轴的缩放
• transform: scaleZ(z)对目标进行z轴的缩放

倾斜

倾斜允许目标可以在2d下进行缩放 数值为角度

• transform: skew(x-angle,y-angle)
• transform: skewX(angle)
• transform: skewY(angle)