移动端web开发第一天（字体图标、平面转换）

字体图标(https://www.iconfont.cn/)

1.字体图标优点

• 灵活性：灵活地修改样式，例如：尺寸(font-size)、颜色(color)等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器
• 使用方便（1.下载图标-->2.使用图标）

2.下载字体图标

• 登录

• 选择图标库

  
  
  选择库.png

• 选择图标，加入购物车

  
  
  选择图标.png

• 点击购物车

  
  
  购物车.png

• 添加至项目

• 下载至本地

  
  
  下载至本地.png

3.使用字体图标

 3.1.Unicode编码 方式
  引入样式表：iconfont.css(下载至本地后的文件中有该文件）

导入方式.png

复制粘贴图标对应的Unicode编码

usc.png

设置文字字体

style.png

3.2 类名 方式

• 引入样式表：iconfont.css

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

  
  
  class.png
  
  
  classstyle.png

3.上传矢量图

• 上传 → 上传SVG图标

  
  
  图标上全.png
• 浏览本地图标 → 去除颜色提交
• 加入购物车 → 下载使用

平面转换（transform）

• 移动：translate

 语法：transform: translate(水平移动距离x, 垂直移动距离y);

平面坐标.png

单独设置某个方向的移动距离：translateX() & translateY()
注意：
  1.取值可以为数字、百分比
  2.translate最大的优点：不会影响到其他元素的位置。
  3.translate中的百分比单位是相对于自身元素的translate:(50%, 50%);
  4.对行内标签没有效果

• 旋转：rotate

语法：transform: rotate(角度 deg);
取值：
  取值为正, 则顺时针旋转
  取值为负, 则逆时针旋转

• 转换圆点：transform-origin

语法：transform-origin: x y;
  默认圆点是盒子中心点
  transform-origin: 原点水平位置 原点垂直位置;
取值：
  方位名词（left、top、right、bottom、center）
  像素单位数值
  百分比（参照盒子自身尺寸计算）
注意：
  注意后面的参数x和y用空格隔开
  x y默认的中心点是元素的中心点（50% 50%）

• 缩放scale

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

渐变

语法：background-image: linear-gradient(direction方向, color-stop1, color-stop2, ...);

参数：

  direction 可选值，定义渐变的方向（例如从左到右，从上到下），可以是具体角度（例如 90deg），也可以通过 to 加 left、right、top、bottom 等关键字来表示渐变方向，例如：
  to left：表示从右到左，相当于 270deg；
  to right：表示从左到右，相当于 90deg；
  to top：表示从下到上，相当于 0deg；
  to bottom：默认值，表示从上到下，相当于 180deg；
  to right bottom：表示从左上到右下；
  to right top：表示从左下到右上；
  to left bottom：表示从右上到左下；
  to left top：表示从右下到左上。