iconfont的使用、transform、背景渐变（移动Web第一天）

从小白到高级前端工程师的学习历程

字体图标

iconfont 阿里巴巴矢量图标库

• www.iconfont.cn/

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

• 本地引入

  • 挑选图标加入购物车
  • 添加至项目
  • 去到项目中，点击下载代码
  • 解压压缩包，更改文件夹的名字为iconfont
  • 放到项目文件夹中
  • 利用font class的方式去引入
  • 主要在项目结束时，或者文件变更可能性不大的情况下使用最佳

• 在线引入

  • 挑选图标加入购物车
  • 添加至项目
  • 复制在线的链接
  • link标签引入在线链接
  • 先设置公共的类名iconfont
  • 再粘贴图标的类名即可
  • <i class="iconfont icon-xxx"></i>使用方法
  • 在开发时，配合UI调用icon图使用最佳
  • 在线引入时在link前要加入https：网络传输协议

fontawesome

了解即可，也可以利用在线引入fontawesome库使用

icomoon

了解即可，国外icon平台，主要是收费，所以不用，而且全英

2D变换 . 转换 transform

平面坐标系

• 从左到右是正值
• 从上到下是正值
• 反方向为负值
• X轴跟数学坐标系一致，Y轴跟数学坐标系反过来

平移

• transform: translate(水平, 垂直);
• 百分比参考自身计算
• 单位可以使用百分比或者像素
• 应用：配合定位实现元素水平垂直居中

旋转

• transform: rotate(30deg)
• 正值顺时针 负值 逆时针
• 默认旋转原点为该元素的中心点
• 注意事项，不设置过渡和过渡时间时，0°，360°可能不发生变化

缩放

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

• 倍数：0 - 1缩小 大于1 放大

• transform: scale(2)

  • 代表水平垂直放大2倍

• 缩放值为负数时，图像翻转

斜切

• transform: skewX(30deg);
• transform: skewY(30deg);
• 应用： 擦亮效果。 如下擦亮效果CSS样式

注意

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

• 2. 如果有多个转换要写到同一个transform里面 并且用空格分隔

  • transform: translate(100px) rotate(10deg)
• 3. 如果同时有旋转和平移属性，最好先写平移，避免先旋转影响坐标系的方位（不然出现的效果会像蜗牛壳一样）

更改转换原点

• transform-origin: 水平 垂直;

• 方位坐标

  • left
  • top
  • center
  • right
  • bottom

• 具体像素

背景渐变

background-image: linear-gradient(方位, 颜色, 颜色);也可以直接用background:linear-gradient(方位，颜色，颜色);

方位

• to right(不写时默认值为从上到下)

  • 从左到右

• 45deg

  • 从左下到右上
  • 参考时钟

拓展

背景裁切（暂时仅做了解，用处较小）

• background-clip

  • border-box

  • padding-box

  • content-box

  • text

    • 背景只显示在文字的区域
    • -webkit-background-clip: text
    • 应用：可以配合背景渐变实现渐变色文字
    • color: transparent;

属性选择器（不常用）

[]用中括号包住属性，以键值对出现的叫做属性

例如：在表单中的input的 [type="text"]，[class="类名"]等。

• [class^="red"]，以red为开头的所有类，都能直接选中。
• [class$="box"],以box为结尾的所有类，都能直接选中。
• [class*="box"],类名中带有box关键字的，都能直接选中。（三个之中最常用）

目前主要用处

1. 用于省略引用iconfont时需要重复输入iconfont的类名
2. 使用方法，直接将iconfont内置的CSS样式进行赋值，然后利用标签选择器，将CSS样式类名更改为[class*="icon-"]即可