移动web基础Iconfont字体图标的引用、transform元素形态变化、background-image背景渐变、

一、Iconfont矢量图标引用

Unicode编码、类名、伪元素三种方式引用iconfont。先link / iconfont.css文件。

<!-- 1.引入iconfont文件夹中的iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">

① Unicode编码

    <style>
      i {
       // 声明字体图标库 
        font-family: iconfont;
      }
    </style>
  </head>

  <body>
    <i>&#xe721;</i>
  </body>

② 类名

<i class="iconfont icon-QRcode icon1"></i>

③ 伪元素

<style>
      a::before {
        //  \反编译 
        content: '\e77a';
        font-family: iconfont;
      }
    </style>
  </head>

  <body>
    <a href="#">购物车</a>
  </body>

二、transform形态转换

平面转换

① 可以增大盒子的层级

② 对行内元素不起作用

③ 需要添加过渡属性（增强用户体验感）

④ 连写时，先写平移再写旋转，因为旋转会改变坐标轴的方向

⑤ 给具有3D属性的父元素添加perspective:(400px-1200px);会产生近大远小、近实远虚的视觉效果

// 父元素添加视距使子元素Z轴的平面转换更具意义
perspective:(400px-1200px);

// 原点转换
transform-origin: ;

// 平移
transform:translate(); 

// 旋转
transform:rotate(deg);

// 缩放
transform:scale();

// 连写
transform:translate() rotate(deg) scale();

空间转换（3D）

给具有3d属性的父元素添加transform-style:preserve-3d; 开启子元素的3d环境

// 开启3d环境
transform-style:preserve-3d; 

// 沿Z轴旋转（前后关系）
transform: rotateZ();

// 沿X轴旋转（左右关系）
transform: rotateX();

// 沿Y轴旋转（上下关系）
transform: rotateY();

// 连写：沿X,Y,Z轴取值0-1的数字，后面加上角度
transform:rotate3d(x , y, z, deg);


**倾斜**
// 沿着x、y轴旋转，形成平行四边形形状
transform:skew( deg);

三、背景渐变

① 可添加方位词改变渐变方向

② 可添加deg角度改变渐变方向

// 透明至 某颜色渐变
background-image:linear-gradient(transparent, rgba(0,0,0,0));

四、动画

① 赋值时，若出现两个时长，则第一个为动画时长，第二个为延迟时长。

② 速度曲线赋值linear时不可再赋值steps()，其二选一赋值。

③ 多动画同时引用时，直接在animation:动画1;后，以逗号隔开添加第二个动画属性即可。

④ 创建动画属性： @keyframes 动画名称 {} 。

// animation:动画名称 动画时长 速度曲线 延迟时间 重读次数 动画方向 执行完毕时状态;

animation:name duration timing-function delay iteration-count direction fill-mode;


// hover时动画暂停：
:hover {
    animation-play-state:paused;
}

animation:动画1 1s steps(12) infinite, 动画2 3s linear forwards;