前端 第五节 线性渐变与转换

一、渐变

1.线性渐变

• linear-gradient（开始位置/角度，起始颜色，终止颜色）
• 开始位置：渐变开始的位置，属性值可以为百分比，长度left/right/top/bottom（可组合使用）与to搭配
• epeating-linear-gradient：重复的线性渐变

2.径向渐变

• radial-gradient（形状，发散方向，起始颜色，终止颜色）
• 形状：ellipse（椭圆）/circle（圆形）
• 发散方向：center，left，right，top，bottom（与at搭配）
• 大小（半径）：用像素或关键字表示
  closest-side：圆心到距离最近的边
  farthest-side：圆心到距离最远的边
  closest-corner：圆心到距离最近的角
  farthest-corner：圆心到距离最远的角
• repeating-radial-gradient：重复的径向渐变
  动画：
• none 定义不进行转换。

二、转换

1.2D转换

• translate(x,y) 定义 2D 平移转换。
  translateX(x) 定义转换，只是用 X 轴的值。
  translateY(y) 定义转换，只是用 Y 轴的值
• 移动：translate(x,y)；
  缩放：scale(x,y)；
  旋转：rotate(angle)；

2.3D转换

• translate3d(x,y,z) 定义 3D 转换；
• 旋转：rotate3d(x,y,z,angle)；
  缩放：scale3d(x,y,z)。
  过渡： transition。
• transition-property 规定应用过渡的 CSS 属性的名称；
  transition-duration 定义过渡效果花费的时间；
  transition-timing-function 规定过渡效果的时间曲线；
  transition-delay 规定过渡效果何时开始