web移动第一天

字体图标

位移

渐变

字体图标

优点

和字体一样，使用灵活，可以更改颜色大小等属性（font-size、color）
轻量级，体积小减少浏览器请求次数
兼容性好
使用方便

使用

不推荐

<title>Document</title>
<link rel="stylesheet" href="./font_3243679_v8suymv9sir/iconfont.css">
<style>
span{
   font-family: 'iconfont';
   font-size: 130px;
}
.red{
   color: red;
}
</style>
</head>
<body>
  <span  class="red">&#xe635;</span>
  <span>&#xe63d;</span>
</body>

类名法：推荐，好用
```
<title>Document</title>
  <link rel="stylesheet" href="./font_3243679_v8suymv9sir/iconfont.css">
  <style>
       .s1{
           font-size: 30px;
           color: green;
      }
  </style>
</head>
<body>
  <span class=" s1 iconfont icon-icon-test"></span>
  <span class=" iconfont icon-icon-test"></span>
</body>
```
思维导图链接

www.processon.com/view/link/6…

指bgi（一般写两个颜色）（也可以写百分比来控制颜色的占比）（还可以改变顺序，比如to。bottom指从上到下，）

写法：bgi-linear-gradients

渐变

位移旋转同时存在时先写位移，在写旋转

transition（过渡）是加到变化时间，写在变化元素里（一般写多少秒s）

rotate是指旋转多少度（单位时deg）

scale是指放大缩小多少倍效果（直接写数字）

origin是设置旋转中心（直接写center，right等方向）

位移（transform）

位移、渐变等

web移动第一天

字体图标

位移

渐变

字体图标

优点

使用

渐变

位移（transform）