移动web第一天（字体图标、平面转换、渐变）

---

一、字体图标

• 灵活性：灵活地修改样式，例如：尺寸、颜色等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器
• 使用方便：下载字体包，使用字体图标

1、下载字体包

• 图标库：https://www.iconfont.cn/
• 登录（新浪微博）→选择图标库→选择图标
• 加入购物车→购物车→添加至项目→下载至本地

2、使用方法

（1）Unicode编码

• 引入字体图标样式表：<link rel="stylesheet" href="./iconfont/iconfont.css">
• 复制粘贴图标对应的Unicode编码：<span>&#xe6eb;</span>
• 设置文字字体：span{ font-family: 'iconfont'; }
  

（2）类名

• 引入字体图标样式表：<link rel="stylesheet" href="./iconfont/iconfont.css">
• 调用字体图标类名：<div class="iconfont icon-xxx"></div>
• iconfont 基本样式，包含字体的使用等
• icon-xxx 图标对应的类名
  

3、上传矢量图

• 上传→上传SVG图标
• 浏览本地图标→去除颜色提交
• 加入购物车→添加至项目→下载使用
  

二、平面转换

• 目标：使用transform属性实现元素的位移、旋转、缩放

1、位移

• 使用translate实现元素位移效果
• transform:translate(水平移动距离,垂直移动距离);
• 取值：像素单位数值或百分比
• 如果只给一个值，表示X轴方向移动距离
• 单独设置某个方向的移动距离：translateX() & translateY()
• 使用translate快速实现绝对定位的元素居中效果:

	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);

2、旋转

• 使用rotate实现元素旋转效果
• transform:rotate:原点水平位置 原点垂直位置;
• 取值：正负皆可，单位deg
• 取值为正，顺时针旋转
• 取值为负，逆时针旋转

3、转换原点

• 使用transform-origin属性改变转换原点
• transform-origin：(角度);
• 取值：方位名词（letf top right bottom center）、像素单位数值或百分比

4、多重转换

• 使用transform复合属性实现多形态转换
• 例如transform: translate() rotate();
• 旋转会改变网页元素的坐标轴向，因此先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果；所以旋转效果的放在后面写。

5、缩放

• transform: scale(x轴缩放倍数, y轴缩放倍数);
• 一般情况下，只设置一个值，表示x轴与y轴等比例缩放
• scale值大于1表示放大, scale值小于1表示缩小

三、渐变

• 渐变是多个颜色逐渐变化的视觉效果
• 一般用于设置盒子的背景
• 例如： background-image: linear-gradient(transparent,rgba(0,0,0,.6));