移动web字体图标、平面转换、渐变

一、字体图标

1.iconfont矢量图标的网址（https://www.iconfont.cn/）
2.网页字体图标是需要用"link"引入iconfont.css文件才能生效
3.1使用字体图标的步骤（unicode写法）：

• 先引入字体图标文件

  
  
  引入字体图标.png

• 通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来

  
  
  unicode编码.png

• 声明字体图标库

  
  
  声明图标库.png
  
  

  3.2

• 引入iconfont.css文件

  
  
  引入字体图标.png

• 通过标签承接字体图标
  类名：
  第一个类名是固定的：iconfont;
  第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可

注意： 这个引用字体图标的方式不能用标签名去改变属性，不能生效，iconfont的权重比标签的权重高，最好是自己起一个类名来使用修改样式，否则用到相同的字体图标的时候，会导致继承的效果，若是需要每个都不一样，就只有通过自己重新起类名来修改其中的样式了

类引入字体图标.png

3.3

• 先引入字体图标文件

  
  
  引入字体图标.png

• 在content内容中，填充该字体图标的unicode编码，然后把前三个字符和后面的分号去掉，在最前面添加“\”
  \作用：编译

  
  
  伪类使用字体图标的方式.png

3.4 在线引入

在线引入字体图标.png

在线引入使用方式同类名相似.png

注意：在线引入想当于引入了字体图标文件，其使用方法还是跟类名的使用方法相同的

二、平面转换（transform）

1. 平移：translate
   平移：translateX、translateY、这两个是对于x轴和y轴的位置进行平移的，对象的对象是针对于那些需要平移的盒子而设定的，其效果是瞬间的。
   想要看到其效果是要添加过渡（transition），设置相应的动作的时长，同时需要搭配（hover）伪元素才能有相应的动作的。
   单位：px/像素
   transtion()：当只有一个值的时候，默认是X轴的正方向（向右是正方向，向下是正方向；反之为负值）
   单位：%
   对应的是实现该效果的盒子值，参照的是自身盒子的尺寸
   特点：
   1.transform属性对于行内元素是无效的
   2.添加了transform属性的盒子可以提高盒子层级，保留原来的位置----类似于相对定位的特点

   
   
   transform.png

2. 旋转（rotate）

   
   
   旋转.png
   
   

   单位：deg
   正值是顺时针
   负值是逆时针

3. 缩放（scale）

   
   
   transform三要素.png
   
   

   注意点：

   
   
   transform注意点.png

4. 子盒子在父盒子内部居中的案例

   
   
   子盒子在父盒子内部居中的效果.png

5. 转换原点

   
   
   转换的参考原点.png
   
   

   意思就是选择某个点作为参照点（多半用于旋转的作用）
   三、 渐变

   
   
   渐变.png

• 效果默认是水平向右的渐变方向
• to 方位名词,color1,color2会默认向设置的那个方向渐变
• 角度（deg）也会从设置的那个角度去渐变
• 获取渐变色彩的链接（https://uigradients.com/#KyooTah）