2021-07-31

一、渐变

 概念：针对于盒子的背景颜色设置 渐变是由浏览器解析得到的。
渐变属性：backgroud/background-image

1.线性渐变

属性值:linear-gradient(参数)
        - 第一个参数:方向(可以省略不写)
        - 第二个参数:颜色1
        - 第三个参数:颜色2
        - ...
方向值的设置
        - 默认值是从上到下的
        - 从一个边到另外一个边to 结束的方向值
        - 从一个角到另外一个角to水平方向 垂直方向结束的方向值
        - 角度值deg 45deg
！！！:
        - 多个参数之间需要用逗号隔开
        - 线性渐变分标准写法和兼容写法
兼容写法的方向值问题
        - 从一个边到另外一个边开始的方向值
        - 从一个角到另外一个角 水平方向 垂直方向 开始的方向值
        - 角度值deg  90deg - 标准写法
在工作中线性渐变的使用
        - 线性渐变不考虑兼容性写法了
        - 常用:background:linear-gradient(颜色1,颜色2)

2.径向渐变

属性值:radial-gradient(参数)
   - 参数1:渐变的起点
         - 默认值是中心
         - 水平和垂直方向
         - value值
  - 参数2:渐变的形状
         - ellipse 椭圆是默认值
         - circle 圆
- 参数3:渐变的大小
         - 和前面的参数之间需要使用空格隔开 ！！！
- 参数4:渐变的颜色1
- 参数5:渐变的颜色2

3.重复渐变

- 重复线性渐变
         - 重复径向渐变

4.过渡的使用

过渡必须要有初始状态到结束状态( 例如初始宽高是100px=> 结束宽高是500px) none和block不可以使用过渡
   过渡属性建议给改变的元素本身添加
          - hover效果改变的是元素
          - 鼠标移出去的 时候 本身还是会作用域过渡效果
1) 参与过渡的属性 transition-property
          - 属性值表示当前参与过渡的属性
          - 如果有多个属性需要参与过渡 属性之间用空格隔开
          - 使用all表示全部 或者不写省略默认为全部
2) 过渡的时间  transition-duration
          - 秒s / 毫秒ms
          - 用户体验最佳的时间 0.8s
3) 过渡的延迟 transition-delay
4) 过渡运动的方式 transition-timing-function（逐渐慢下来  默认的运动方式）
简写 :属性:transition
         属性值:0.8s;

二、2D

1.位移属性 transform

属性值:translate(参数)
     - 参数有两个 表示水平方向和垂直方向的值 用逗号隔开
     - 只有一个参数值默认是水平方向
     - translateX()
     - translateY()
     - 位移不会脱离文档流

2.缩放属性 transform

属性值:scale(参数)
     - 参数可以设置两个 分别表示元素的缩放宽高 如果两个参数是相同的可以简写成一个
     - 参数>1     放大
     - 参数=1     不变
     - 0
     - 参数=0     隐藏
     - 参数

3属性:transform

旋转属性值:rotate(参数)
     - 参数只有一个 默认的方向是沿着Z轴
     - rotateX() 单杠运动
     - rotateY() 钢管舞/旋转木马
倾斜属性值:skew()
    - 参数有两个
    - skewX()
    - skewY()
总结
    - 观察角度的变化要从轴线的正值方向观察
    - 角度为正值的时候都是沿着顺时针进行变化的
    - 角度为负值的时候都是沿着逆时针进行变化的