画布 1
移动web第二天
  全天目标
    使用空间转换、动画效果丰富网页元素的呈现方式
  空间转换
    目标
      使用位移、缩放、旋转等空间转换效果丰富网页呈现方式
    学习内容
      空间转换介绍
        坐标轴
          X、Y、Z
          Z轴与用户视线方向重叠
        属性
          transform
      空间位移
        完整写法
          translate3d(x, y, z)
        某个坐标轴位移
          translateX()
          translateY()
          translateZ()
      透视
        作用
          产生近大远小，近实远虚的视觉效果
        概念
          视距：用户眼睛和屏幕的距离
        写法
          perspective: 值；
          添加给父级
          取值一般800-1200px之间
      空间旋转
        旋转
          rotateX()
          rotateY()
          rotateZ()
        左手法则
          左手握住旋转轴，大拇指指向坐标轴正值方向， 四根手指弯曲方向为旋转正值方向
      立体呈现
        作用
          让子级处于真正的3D空间内
        写法
          transform-style: preserve-3d;
          添加给父级
      缩放
        完整写法
          scale3d(x, y, z)
        某个坐标轴缩放
          scaleX()
          scaleY()
          scaleZ()
  动画
    目标
      使用关键帧动画效果，给网页元素添加动画特效，提升用户体验
    学习内容
      动画介绍
      基本使用
        定义动画
          @keyframes{
from {}
to {}
}
          @keyframes{
0% {}
20% {}
50% {}
100% {}
}
        使用动画
          animation: 动画名称 动画时长;
      animation属性
        复合属性
          写法
            animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
          注意事项
            取值不分先后顺序
            必须赋值项：动画名称和动画时长
            若出现2个时间：第一个时间为动画时长， 第二个时间为延迟时间
        拆分写法（了解）
          animation-name：动画名称
          animation-duration：动画时长
          animation-delay：延迟时间
          animation-fill-mode：动画执行完毕时状态
            forwards：最后一帧状态
            backwards：第一帧状态（默认值）
          animation-timing-function：速度曲线
            steps(数字) : 逐帧动画
          animation-iteration-count：重复次数
            infinite：无限循环
          animation-direction：动画方向
            alternate：反向
          animation-play-state：动画播放状态
            paused：暂停
            通常配合:hover使用
      逐帧动画
        作用
          精灵动画
          搭配精灵图使用
        核心
          动画速度曲线为steps(N)
          N与精灵图小图个数相同
      多组动画
        作用：一个元素添加多个动画效果
        写法
          animation: 动画1，动画2，动画N；