移动Web-字体图标+平面转换+背景渐变

字体图标

（国内）iconfont 阿里巴巴矢量图标库

• 网址

  • www.iconfont.cn/

  • 注意事项

    • 一定要注册登录方便项目管理

• 使用方式

  • 本地引入

    • 挑选图标加入购物车
    • 添加至项目
    • 去到项目中，点击下载代码
    • 解压压缩包，更改文件夹的名字为iconfont
    • 放到项目文件夹中
    • 利用font class的方式去引入

  • 在线引入（推荐）

    • 挑选图标加入购物车
    • 添加至项目
    • 复制在线的链接
    • 复制在线的链接
    • 先设置公共的类名iconfont
    • 再粘贴图标的类名即可
    • <i class="iconfont icon-xxx"></i>

国外

• fontawesome
• icomoon

平面转换（2D）transform

平移

• transform: translate(水平, 垂直);

• 百分比参考自身大小

• 应用

  • 配合子绝父相实现元素水平垂直居中

  • 代码

    • 父元素{ position: relative;}

    • 子元素{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

旋转

• transform: rotate(deg);
• 正值 顺时针旋转
• 负值 逆时针旋转

缩放

• transform: scale(水平倍数, 垂直倍数)；

• 0~1：缩小

• 大于1：放大

• 如果只设置一个倍数，则代表在水平和垂直方向上都是缩小或放大这个倍数

  • transform: scale(2)；

    • 代表水平垂直放大2倍

转换原点

• transform-origin: 水平 垂直;

• 单位

  • 设置方位名词 left right center top bottom
  • 如果只写一个值，另一个值默认为center
  • 具体像素

斜切

• transform: skewX(XXdeg);
• transform: skewY(XXdeg);
• 应用： 擦亮效果

平面坐标系

• 从左到右是正值
• 从上到下是正值
• 反方向为负值

注意点

• 0. 行内元素设置转换无效的

• 2. 如果有多个转换要写到同一个transform里面 并且用空格分隔（防止下面的转换覆盖了上面的转换）

  • transform: translate(XXpx) rotate(Xdeg)；
• 3. 如果同时有旋转和平移属性，最好先写平移（避免先旋转影响坐标系的方位）

背景渐变

本质

• 背景图片

语法

• background-image: linear-gradient(方向,颜色,颜色)；

单位

• 0. 方位名词

  • to right

    • 从左到右

  • to right top

    • 从左下到右上

• 2. 角度（参考时钟）

  • 0deg

    • 从下到上

  • 45deg

    • 从左下到右上

方向： 默认 从上到下

\