画布 1
移动web第一天
  全天目标
    使用字体图标简化网页中装饰性图标实现方式
    使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式
  字体图标
    目标
      使用字体图标简化网页中装饰性图标实现方式
    学习内容
      字体图标介绍
        iconfont图标库
        特点
          字体图标看起来是图，本质是字
          加载速度快
          兼容性高
          灵活性高
            通过字体属性控制样式
      下载
        登录后，选择目标图标，加入购物车
        在购物车中添加至项目后， 在项目中下载
      使用
        Unicode编码
          引入iconfont.css样式表
          标签粘贴Unicode编码
          标签调用类名iconfont
        类名
          引入iconfont.css样式表
          标签调用类名
            iconfont（font-family）
            icon-xx（图标对应的类名）
      svg上传
        作用： 图标库中的图标无法满足项目需求
        步骤
          1. 上传SVG图标
          2. 去除颜色提交
          3. 加购物车并下载使用
  平面转换
    目标
      使用位移、缩放、旋转、渐变效果丰富网页呈现方式
    学习内容
      平面转换介绍
        平面
          x和y 2条坐标轴组成的屏幕
          x轴正值向右
          y轴正值向下
        转换
          改变盒子形态
            位置
            角度
            大小
        属性： transform
      位移
        translate(x, y)
        translateX()
        translateY()
      定位盒子居中
        定位
          绝对定位
          left：50%
          top：50%
        位移
          translate(-50%, -50%)
      旋转
        rotate(角度)
        单位：deg
        旋转方向
          正值：顺时针
          负值：逆时针
      转换中心点
        属性
          transform-origin
        取值
          关键词
            top
            bottom
            center
            left
            right
          百分比
          px
      多重转换
        定义
          同时改变盒子的多个形态
        注意
          旋转放在最后
          旋转会改变坐标轴向
      缩放
        scale(倍数)
        值
          大于1，表示放大
          小于1，表示缩小
  渐变
    目标
      使用background-image属性添加渐变背景效果
    学习内容
      基本写法
        background-image： linear-gradient(
颜色1,
颜色2,
......
);
      透明渐变
        background-image: linear-gradient(
transparent,
rgba(0, 0, 0, .6)
);