移动Web-CSS进阶

字体图标

目标：实现网页中简洁的图标效果

• 本质上是字体，展示的样式为图标
• 用来处理简单、颜色单一的图片

优点

• 灵活性：样式改变灵活
• 轻量级：体积小、渲染快，降低服务器请求次数
• 兼容性高
• 使用方便：
  • 下载字体包
  • 使用字体图标

图标库

https://www.iconfont.cn/

使用字体图标

• 引入字体图标样式表

link rel=“stylesheet” href=“./iconfont.css”

• 调用字体图标对应的类名，必须调用两个类名
  • iconfont类：基本样式，包括字体使用
  • icon-xxx：图标对应的类名

平面转换

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

• 位移：

  • 语法：transform:translate(水平移动距离, 垂直移动距离);
  • 取值：像素单位数值/百分比
  • 单独设置某个方向的值：translateX()/translateY()

• 旋转

  • 语法：transform:rotate(角度 deg);

• 转换原点

• transform-original(原点水平位置, 远点垂直位置);

• 取值：方位名词(left right top bottom center)/像素单位数值/百分比

• 用于原标签本身，不写入hover内

• 多重转换

• 语法：transform:translate() rotate();

• 注意：语法位置一般不轻易改变，因为旋转会改变坐标轴向，会使效果受影响

• 缩放

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

渐变

目标：使用background-image属性实现渐变背景效果

• 渐变是多个颜色逐渐变化的视觉效果
• 一般用于设置盒子的背景
• 语法：background-image:linear-gradient(颜色1, 颜色2…);

提示：网页开发中一般使用透明-rgba的效果，一般写为

background-image:linear-gradient(
transparent,
rgba(0,0,0,0.5)
);