2022-04-01移动web第一天：字体图标、平面转换、渐变、缩放

一、字体图标

下载地址(https://www.iconfont.cn/)
有三种引入方法和一种高级写法：

1.Unicode编码

将选择的字体图标加入项目，点击下载；
将下载的文件解压重命名为iconfont；
在页面中引入iconfont文件夹里面的iconfont.css；
在body里面创建i标签去承接字体图标，并且在内容中填写Unicode编码；
在style里面通过选择器声明字体图标库。

<link rel="stylesheet" href="./iconfont.css">
<style>
  i {
    font-family: iconfont;/* 声明字体图标 */
    font-size:20px;
    color:red;
  } 
</style>
<body>
   <i>&#xe605</i><!-- 在内容中添加unicode编码 -->
</body>

2.类名

将选择的字体图标加入项目，点击下载；
将下载的文件解压重命名为iconfont；
在页面中引入iconfont文件夹里面的iconfont.css；
在body里面创建i标签去承接字体图标，并添加对应的class类名，iconfont必加，然后挑选对应的字体图标类名；
注意：不能用标签选择器去控制字体图标样式

<link rel="stylesheet" href="./iconfont.css">
<body>
   <i class="iconfont iconfont--xx"></i><!-- 如果需要调整字体图标样式，就在单独加一个类名控制 -->
</body>

3.在线引入

复制在线链接代码，在项目中引入，需要在最前面加上http:
通过类名去承接字体图标，并挑选对应类名

<link rel="stylesheet" href="http://at.alicdn.com/t/font_3267166_6qupz2abfq8.css">
<i class="iconfont iconfont-xx"></i>

4.伪类添加子图图标

在项目中引入字体图标
在需要添加字体图标的元素身上添加伪元素
将content里的内容添加上uniconde编码，但需要去掉前三个字符和最后的分号
申明字体图标库

<link rel="stylesheet" href="./iconfont.css">
<style>
  i::before {
    content: "e603";/* 添加uniconde编码，但需要去掉前三个字符和后面的分号 */
    font-family: iconfont;/* 声明字体图标库 */
    color: red;
  }
</style>
<body>
  <i></i>
</body>

二、transform属性之位移、旋转、渐变、缩放

1.位移transform:translate

根据自身的位置进行改变
取值：translate/translateX()/translateY()【XY不区分大小写】
连写：translate(x,y)，当参数只写一个值得时候，默认x轴
特点：对行内元素没有效果，当添加了transform属性的元素会提高层级并且保留位置，跟相对对应特性差不多

2.旋转transform:rotate(Ndeg)

以元素的中心点位置进行旋转，单位deg，正数顺时针旋转，负数逆时针旋转

2.2. transform-origin ; 改变元素旋转的中心点位置

/* 取值1：关键词 */
transform-origin: right bottom;/* 右下角 */
/* 取值2：像素xp */
transform-origin: 100px 100px;/* 如果单位是像素，则原点中心位置是左上角开始计算位置 */
/* 取值3：百分比% */
transform-origin: 100% 100%;/* 百分比是参照元素本身的尺寸进行计算 */

2.3.多重转换，既位移又旋转

transform:translate(100px) rotate(360deg);/* 必须先写位移在写旋转，因为如果先旋转就会在转变的过程中更改x轴的指向，导致位移出错 */

3.渐变background-image: linear-gradient

background-image: linear-gradient(
  /* 参数1 */
  /* 方向值：默认从上到下 */
  /* 1.也可以写关键字，例如，从左到右，to right，从左上到右上渐变to right top，只写最终的值就行 */
 /*  2.也可以写角度deg，就不用加to */
   to right bottom,
  /* 参数2-透明度 */
    transparent,
  /* 参数3-颜色 */
    red,
    black
)

4.缩放transform: scale

以元素中心点位置进行缩放
transform:scale(宽倍数,高倍数)，可以只写一个值，默认等边缩放，大于1则是放大，小于1则是缩小，等于1没变化