一、字体图标

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

image-20230221203759827.png

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

字体图标优点：

• 灵活性：灵活地修改样式，例如尺寸，颜色等

• 轻量级：体积小，渲染快，降低服务器请求次数

• 兼容性：几乎兼容所有主流浏览器

• 使用方便：

  • 1.下载字体包 locnfont
  • 2.使用字体图标

  使用字体图标-类名：

  1.引入字体图标样式表

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

  <link rel="stylesheet" href="./iconfont/iconfont.css">
  

  • iconfont类：基本样式，包含字体的使用等

  • icon-xx: 图标对应的类名

    <i class="iconfont icon-address"></i>
    

如果图标库没有项目所需要的图标怎么办？
答：与设计师沟通，得到SVG矢量图，在IconFont 网站上传矢量图生成字体图标，下载使用。

二、平面坐标转换

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

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

使用transform 实现元素位移效果

transform:translate(x,y);
x,y:正负均可，百分比（参照物为盒子自身尺寸）

三、渐变

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

• 渐变是多个颜色逐渐变化的视觉效果
• 一般用于设置盒子的背景

background-image:linear-gradient (
  颜色1,
  颜色2
);