移动web第一天

移动Web第一天

字体图标（字体图标展示的是图标，本质是字体。处理简单的颜色单一的图片。）

• 目标：使用字体图标技巧实现网页中简洁的图标效果
• 优点：
  • 灵活性：灵活的修改样式，例如：尺寸，颜色等
  • 轻量级：体积小，渲染快，降低服务器请求次数
  • 兼容性：几乎兼容所有的主流浏览器
  • 使用方便：1，下载字体包2.使用字体图标
• 图标库：`https://www.iconfont.cn/
• 使用：
  • 引入字体图标样式表(link rel=“srtlesheet” href=“./iconfont.css”)
  • 调用图标对应的类名，必须调用两个类名：1.iconfont”基本样式，包括字体的使用2.icon-xxx：图标对应的类名

平面转换（改变盒子在平面内的形态（位移，旋转，缩放）、2D属性）

位移

• 目标：使用transform属性实现元素的位移、旋转、缩放等效果
• 语法：transform：translate（水平移动距离，垂直移动距离）
• 取值：正负均可
  • 像素单位数值
  • 百分比
• 技巧：
  • translate（）如果只给出一个值，表示x轴方向移动距离
  • 单独设置某个方向的移动距离：translateX（）& translate Y（）
• 实现方法：
  • 原理：位移值为百分比数值，参照盒子自身尺寸计算移动距离
  • position：absolute； left：50%； top：50%； transform：translate（-50%，-50%）；
• 旋转：（遇到旋转尽量写最后，因为旋转会影响坐标轴的轴向）
  • 目标：使用rotate实现元素旋转效果
  • 语法：transform：rotate（角度）；角度单位是deg（取值正负均可）。取值为正，则顺时针旋转，反之则逆时针旋转
  • 转换原点：
    • 目标：使用transform-origin属性改变转换的原点
    • 语法：
      • 默认原点是盒子中心点
      • transform-origin：原点水平位置，原点垂直位置
    • 取值：
      • 方位名词（left、top、right、button、center）
      • 像素单位数值
      • 百分比（参照盒子自身尺寸计算）
    • 多重转换
      • 目标：使用transform复合实现多形态转换
      • 多重转换技巧：transform：translate（） rotate（）；
      • 多重转换原理：
        1. 旋转会改变网页元素的坐标轴的轴向
        2. 先写旋转，则后面的转换效果以旋转后的轴向为准，会影响结果
    • 缩放
      • 目标:使用scale改变元素尺寸
      • 语法：transform：scale（x轴缩放倍数，y轴缩放倍数）
      • 技巧：一般情况下，只为scale设置一个值，表示x轴与y轴等比例缩放
        1. transform：scale（缩放倍数）
        2. scale值大于1表示放大，小于则表示缩小

渐变

• 目标：使用background-image属性实现渐变背景效果
• 渐变是多个颜色逐渐变化的视觉效果
• 语法：
  • background-image：liear-gradient(颜色1，颜色2)