移动WEB学习 - 字体图标、平面转换、渐变

一、字体图标

• 目标：使用字体图标技巧实现网页中简介的图标效果
• 字体图标的优点：
  • 灵活性：灵活的修改样式，例如：尺寸、颜色等
  • 轻量级：体积小，渲染快、降低服务器请求次数
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便：下载字体包；使用字体图标
• 使用字体图标 - 类名
  • 引用字体图标样式表

    <link rel-"stylesheet" href="./iconfont.css">

  • 调用图标对应的类名，必须调用2个类名
    • iconfont类：基本样式，包含字体的使用等
    • icon-xxx：图标对应的类名

二、平面转换

• 目标：使用transform属性实现元素的位移、旋转、缩放等效果
• 平面转换
  • 改变盒子在平面的形态（位移、旋转、缩放）
  • 2D转换
• 平面转换属性
  • transform

1、位移

• 语法
  • transform:transform(水平移动距离 , 垂直移动距离);
• 取值(正负均可)
  • 像素单位数值
  • 百分比（参照物为盒子自身尺寸）
  • 注意：x轴正向为右；Y轴正向为下
• 技巧
  • translate()如果只给出一个值，表示x轴方向移动距离
  • 单独设置某个方向的移动距离，translateX() & translateY()
• 位移-绝对位置居中

2、旋转

• 语法：
  • transform:rotate(角度);
  • 注意：角度单位deg
• 技巧：取值正负均可
  • 取值为正，则顺时针旋转
  • 取值为负，则逆时针旋转
• 旋转-转换原点
  • 语法：
    • 默认原点是盒子中心点
    • transfrom-origin:原点水平位置 原点垂直位置;
  • 取值
    • 方位名词(left、top、right、bottom、center)
    • 像素单位数值
    • 百分比（参照盒子自身尺寸计算）
• 旋转-多重转换
  • transform:translate() rotate();

3、缩放

• 语法：
  • transform:scale(x轴缩放倍数，y轴缩放倍数);
• 技巧
  • 一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放
  • transform:scale(缩放倍数);
  • scale值等于1表示放大，scale值小于表示缩小

三、渐变

目标：使用background-image属性实现渐变背景效果

• 渐变是多个颜色逐渐变化的视觉效果
• 一般用于设置盒子的背景