web前端学习第十九天

移动web第一天

1，字体图标

目标：使用字体图标机巧实现网页中简洁的图标效果

字图标

1. 字体图标展示的是图标，本质是字体
2. 处理简单的，，颜色单一的图片

字体图标的优点：

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

图标库iconfont：https://www.iconfont.cn/(https://www.iconfont.cn/

下载字体：
登录——选择图标库——选择图标，加入购物车——添加至项目——下载至本地

使用字体图标：Unicode编码：
引入式：iconfont.css
复制粘贴图标对应的Unicode编码
设置文字字体

span {
	font-family:"iconfont";
}

<span>&#xe6f8</span>

使用字体图标——类名：
引入字体图标样式表

<link red="stylesheet" herf="./iconfont.css">

调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等
icon xx：图标对应的类名

<span class="iconfont icon-xx"></span>

案例：淘宝购物车
布局标签

li > span * 3

字体图标

引入字体图标样式表
购物车和箭头span调用字体图标类名

上传矢量图：

思考：如果图标库没有项目所需的图标怎么办？

答：IconFont网站上传矢量图生成字体图标
1. 与设计师沟通，得到SVG矢量图
2. IconFont网站上传图标，下载使用

上传矢量图：

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

2,平面转换

目标：使用transform 属性实现元素的位移，旋转，缩放等效果

平面转换

1. 改变盒子在平面的形态（位移，旋转，缩放）
2. 2D转换
3. 转换属性：transform

位移：
目标：使用translate实现元素位移效果

语法:
transform:translate(水平移动距离，垂直移动距离)；

取值（正负均可）

1. 像素单位数值
2. 百分比（参照物为盒子自身尺寸）
   注意：X轴正向为右，Y轴正向为下

技巧

1. translate()如果只给出一个值, 表示x轴方向移动距离
2. 单独设置某个方向的移动距离：translateX() & translateY()

实现方法：

核心代码：

原理

1. 位移取值为百分比数值，参照盒子自身尺寸计算移动距离

3，旋转

目标：使用rotate实现元素旋转效果

语法：

1. transform: rotate(角度);
2. 注意：角度单位是deg

技巧：取值正负均可

1. 取值为正, 则顺时针旋转
2. 取值为负, 则逆时针旋转

转换原点

语法：

1. 默认圆点是盒子中心点
2. transform-origin: 原点水平位置 原点垂直位置;

取值：

1. 方位名词（left、top、right、bottom、center）
2. 像素单位数值
3. 百分比（参照盒子自身尺寸计算）

多重转换

多重转换技巧

多重转换原理

1. 旋转会改变网页元素的坐标轴向
2. 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

4，缩放
目标：使用scale改变元素的尺寸

思考: 改变元素的width或height属性能实现吗？

语法：
transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧

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

播放按钮

布局

1. ::after

样式

1. 居中

效果

1. 缩放
2. 透明度（opacity）