字体图标

下载字体图标（https://www.icnfont.cn/）

image.png

步骤：百度搜索iconfont--素材库或者搜索栏去搜索你想添加的字体图标--点击你想要添加的某个字体图标的购物车--点击右上角的购物车--选择添加至项目（没有项目的要新建项目）--下载至本地，解压出来，解压的文件放在需要使用的文件夹的根目录

image.png

使用方法

1.unicode编码使用
步骤：
1.引入下载好的字体图标文件夹的iconfont.css;
2.利用空标签（大部分是利用i标签）去承接unicode编码内容；
3.声明字体图标库 font-family:iconfont

image.png

2.font-class类名调用
步骤：
1.引入下载好的字体图标文件夹的iconfont.css
2.类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面，直接复制文字下的类名即可

image.png

3.在线引入字体图标
步骤：
1.登录阿里巴巴矢量图标库，打开我的项目，选择Font class，点击生成在线代码。

image.png

平面转换

transfrom属性可以实现元素的位移、旋转、缩放等效果

translate语法

    transform: translate(水平移动距离, 垂直移动距离)
    transform:translateX 单独的设置水平方向位移
    transform：translateY 单独的设置垂直方向位移
    transform：translate translate(100px,50px) |参数代表水平方向位移距离和垂直方向位移距离（X轴正向为右，Y轴正向为下），若为负数则代表反方向。
    transform取值有px和百分比方式。百分比取值：参考盒子自身大小。

转换注意点：

      1.tf属性对于行内元素是无效的；
      2.添加了tf的属性的盒子可以提高盒子层级，保留原来的位置---类似于相对定位的特点。

绝对定位居中：
实现方法一：

image.png

缺点:自身尺寸改变时，不能实现居中效果。

实现方法二：

image.png

通过将位移取值改为百分比数值，盒子自身尺寸改变时自动改变移动距离。

双开门案例：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        position: relative;
        width: 1366px;
        height: 600px;
        background: url("./images/bg.jpg");
        margin: 50px auto;
        overflow: hidden;
      }

      /* 利用::before和::after创建左右门 */
      .box::before,
      .box::after {
        position: absolute;
        top: 0;
        content: "";
        width: 50%;
        height: 100%;
        background: url(./images/fm.jpg);
        transition: 1s;
      }
      .box::after {
        right: 0;
        background-position: right;
      }

      /* 鼠标悬停box让左右门移动 */
      .box:hover::before {
        transform: translate(-100%);
      }
      .box:hover::after {
        transform: translate(100%);
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
  </body>
</html>

rotate语法

transform:rotate(角度)
注意：角度的单位时deg，取值正负皆可，取值为正, 则顺时针旋转；取值为负, 则逆时针旋转。

旋转案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>旋转效果</title>
    <style>
      img {
        width: 250px;
        transition: 1s;
      }

      img:hover {
        /* 顺时针旋转 360deg */
        transform: rotate(-360deg);
        /* 逆顺时针旋转 360deg */
      }
    </style>
  </head>

  <body>
    <img src="./images/rotate.png" alt="" />
  </body>
</html>

transform-origin属性

transform-origin属性可以改变转换原点

    transform-origin语法：
    transform-origin:圆点水平位置圆点垂直位置
    取值：方位名词（left、top、right、bottom、center）,
    像素单位数值，
    百分比（参照盒子自身尺寸计算）
    注意：默认圆点是盒子中心点，取值不用括号括起来。

转换圆点案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>转换原点</title>
    <style>
      img {
        display: block;
        width: 250px;
        border: 1px solid #000;
        margin: 200px auto;
        transition: all 3s;

        /* 1.取值方位名词 最多 */
        transform-origin: right bottom;

        /* 2.具体的像素单位（正负均可） */
        transform-origin: -100px -100px;

        /* 3.百分比(参照于盒子自身尺寸) */
        /* transform-origin: 50% 50%; */
      }

      img:hover {
        transform: rotate(360deg);
      }
    </style>
  </head>

  <body>
    <img src="./images/rotate.png" alt="" />
  </body>
</html>

transform复合属性的使用

transform复合属性可实现多形态转换

transform:translate() rotate();

多重转换原理
Ø 旋转会改变网页元素的坐标轴向
Ø 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

多重转换案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>平面转换的三个效果图</title>
    <style>
      div {
        height: 200px;
        border: 5px solid rgb(155, 90, 90);
        margin-bottom: 20px;
      }
      img {
        height: 100%;
        /* 过渡 */
        transition: 1s;
      }
      .box1:hover img {
        transform: translateX(500px);
      }
      .box2:hover img {
        transform: rotateZ(360deg);
      }
      .box3:hover img {
        transform: scale(1.3);
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <img src="./images/daji.jpg" alt="" />
    </div>
    <div class="box2">
      <img src="./images/daji.jpg" alt="" />
    </div>
    <div class="box3">
      <img src="./images/daji.jpg" alt="" />
    </div>
  </body>
</html>

scale语法

使用scale属性可以改变元素尺寸
transform: scale(x轴缩放倍数, y轴缩放倍数);

    Ø 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
    Ø transform: scale(缩放倍数);
    Ø scale值大于1表示放大, scale值小于1表示缩小

缩放案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>缩放效果</title>
    <style>
      .box {
        width: 300px;
        height: 210px;
        margin: 100px auto;
        background-color: skyblue;
        border: 10px solid #000;
        overflow: hidden;
      }

      .box img {
        width: 100%;
        transition: all 0.5s;
        //过渡属性
      }

      .box:hover img {
        /* 缩放: scale() 大于1表示放大，小于1表示缩小,等于1原大小相当于没有设置 */
        /* transform: scale(1.3，1.3); */
        transform: scale(1.3);
      }
    </style>
  </head>

  <body>
    <div class="box">
      <img src="./images/product.jpeg" alt="" />
    </div>
  </body>
</html>

渐变

background-image属性

使用background-image属性可以实现渐变背景效果
background-image语法：
background-image:linear-gradient(颜色1，颜色2);

image.png

移动Web---字体图标，平面转换，渐变