移动Web第一天 1 字体图标 && 2 平面转换 && 3 渐变

移动Web

老师：黑马程序员

一、移动Web第一天

1 字体图标

1.1 字体图标介绍

字体图标

• 字体图标展示的是图标，本质是字体。
• 处理简单的、颜色单一的图片

字体图标的优点：

• 灵活性
• 轻量级
• 兼容性
• 使用方便

1.2 图标库

https://www.iconfont.cn/

阿里巴巴矢量图标库

下载图标

使用字体图标——Unicode编码：

• 引入样式表 ： iconfont.css
• 复制粘贴图标的Unicode编码
• 设置文字字体

使用字体图标 – 类名

• 引入字体图标样式表
• 调用类名

2 平面转换

平面转换

• 改变盒子在平面内的形态（位移、旋转、缩放)
• 2D转换

平面转换属性

• transform

2.1 位移

语法

• transform: translate(水平移动距离,垂直移动距离);

取值

• （正负均可)>像素单位数值
• 百分比（参照物为盒子自身尺寸)

注意:X轴正向为右，Y轴正向为下

技巧

• translate()如果只给出一个值,表示x轴方向移动距离

• 单独设置某个方向的移动距离: translateX() & translateY()

2.2 旋转

语法

• transform: rotate(角度);
• 注意∶角度单位是deg

技巧:

• 取值正负均可
• 取值为正，则顺时针旋转取值为负，则逆时针旋转

2.3 转换原点

语法

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

取值

• 方位名词( left、top、right、bottom、center )像素单位数值
• 百分比(参照盒子自身尺寸计算)

2.4 多重转换

多重转换原理

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

2.5 缩放

语法

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

技巧

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

3 渐变

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

语法：