一、字体图标

1.目标

使用字体图标技巧实现网页中简洁的图标效果

2.特点

1、字体图标展示的是图标，本质是字体。
2、处理简单的、颜色单一的图片

3.字体图标的优点：

1、灵活性：灵活地修改样式，例如：尺寸、颜色等
2、轻量级：体积小、渲染快、降低服务器请求次数
3、兼容性：几乎兼容所有主流浏览器
4、使用方便

4.图标库

www.iconfont.cn/

5.下载字体包

6.使用字体图标

1. Unicode编码：

引入样式表：iconfont.css
复制粘贴图标对应的Unicode编码
设置文字字体
使用案例

<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>
    <!-- 1.引入iconfont文件夹中的iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
      /* 3.声明字体图标库 */
      i {
        font-family: "iconfont";
        font-style: normal;
        color: skyblue;
        font-size: 100px;
      }
    </style>
  </head>

  <body>
    <!-- 2.通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来 -->
    <i>&#xe6eb;</i>
  </body>
</html>

2. 类名：

引入字体图标样式表
调用图标对应的类名，必须调用2个类名
- 1. iconfont类：基本样式，包含字体的使用等
- 1. icon-xxx：图标对应的类名
使用案例

<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>
    <!-- 1引入iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
      .icon1 {
        font-size: 100px;
        color: skyblue;
      }
    </style>
  </head>
  <body>
    <!-- 
      2.通过标签承接字体图标
        类名：
          第一个类名是固定的：iconfont;
          第二个类名：通过iconfont文件夹中的demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可
     -->
     <i class="iconfont icon-auto icon1"></i>
  </body>
</html>

二、过度

注意点

过度是配合：hover 一起使用完成效果的
正向过度是把过度写在：hover 里面，效果是只能看见元素过去看不见元素回来。
反向过度是把过度写在需要过度的CSS样式里面，效果是能看见元素过去也能看见元素回来。

1、什么是过度

通过 css3 可以在不使用 flash 动画或 javascript 的情况下，为元素从一种样式变换为另一种样式时添加过渡效果。
css3 过渡就是元素从一种样式逐渐改变为另一种的效果，需要确定两点：

需要添加效果的 css 属性
效果的时长

2、过渡属性

过渡有四个属性：transition-property（需要过度的属性）、transition-duration（过度的时间）、transition-timing-function（过度需要的速度）、transition-delay（延迟的时间）

1.transition-property

定义

此属性可以设置添加过渡的 css 样式，可以单独设置只有某一个 css 属性具有过渡效果（property），也可以设置所有属性都有过渡效果（all）

属性

transition-property 有三个属性值：none(没有属性改变)、all（所有属性改变，也是默认值）

注意点

当有多个过度的 css 样式时，他们之间要用英文，隔开。

2.transition-duration

定义

此属性表示规定完成过渡效果需要多少秒或毫秒

属性 (属性直接给秒或者毫秒就可以了)

transition-duration 只有一个属性值：time。表示完成过渡效果需要花费的时间（以秒s或毫秒ms计算，默认为0，意味着没有效果）

3.transition-timing-function

定义

此属性规定了过渡效果的速度，默认值为ease 。

属性

transition-timing-function 有五个属性值：linear（匀速完成过渡）、ease（慢速开始、中间变快、慢速结束）、ease-in（慢速开始，后面匀速）、ease-out（慢速结束，前面匀速）、ease-in-out（慢速开始，中间匀速，慢速结束）

4.transition-delay

定义

此属性定义：何时将开始过渡效果，也叫过渡延迟时间。

属性

与 transition-duration 一样，transition-delay 也只有一个属性值：time。规定在过渡效果开始之前需要等待的时间（以秒s或毫秒ms计算），默认为0，即立即开始过渡效果。

3、过渡的简写

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

1.注意点

注意：此时的 transition-property 需要设置为 all 或者只设置一个值（width\height\backgroud-color）,设置为 all 时，width、height、background-color都具有过渡效果，设置单个属性值时，其他两个属性值就不具有过渡效果，会立即变化。不可以将 transition-property 写成 width,height。

三、平面转换

1、目标

使用transform属性实现元素的位移、旋转、缩放等效果

2、特点

改变盒子在平面内的形态（位移、旋转、缩放）
2D转换

3、平面转换属性

transform

1、位移

1-1.语法

transform: translate(水平移动距离, 垂直移动距离);

1-2.取值（正负均可）

像素单位数值
百分比（参照物为盒子自身尺寸） 注意：X轴正向为右，Y轴正向为下

1-3.技巧

translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY() 扩展注意点：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

1-4.案例

<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: 500px;
      height: 300px;
      margin: 100px auto;
      border: 4px solid #000;
    }

    .son1 {
      width: 200px;
      height: 100px;
      background-color: tomato;
      /* 过渡 */
      transition: all 0.5s;
    }

    .son2 {
      width: 200px;
      height: 100px;
      background-color: #6cf;
      /* 过渡 */
      transition: all 0.5s;
    }
    /* 特点
    1. transform 可以增大盒子的层级
    2. transform 对于行内元素不起效果 */

    /* 技巧：
       1.如果 translate(一个值) 表示x轴方向的移动，y轴不动
       2.X,Y小写大写都有效果 */
       
    /* 鼠标移入到父盒子，son1改变位置 */
    .box:hover .son1 {
      /* tf 像素单位取值 */
      transform: translate(300px, 200px);
      /* tf 百分比 取值：参考盒子自身大小 */
      transform: translate(100%, 100%);
      /* 如果 translate(一个值) 表示 X 轴方向的移动，Y 轴不动 */
      transform: translate(100%);
      /* X,Y小写大写对有效果 */
      transform: translatey(100%);
    }

    span {}

    .box2 {
      width: 200px;
      height: 200px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="son1"></div>
    <div class="son2"></div>
  </div>
  <span>12345,上山打老虎</span>
  <div class="box2">12345,上山打老虎</div>
</body>

</html>

2、旋转

2-1. 语法

transform: rotate(角度); 注意：角度单位是deg

2-2.技巧：取值正负均可

取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

2-3.案例

<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: 2s;
      }

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

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

3、转换原点

3-1.目标

使用transform-origin属性改变转换原点

3-2.语法

默认圆点是盒子中心点
transform-origin: 原点水平位置原点垂直位置;

3-3.取值

方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）

3-4.案例

<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>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        display: block;
        width: 250px;
        border: 1px solid #000;
        margin: 200px auto;
        transition: all 3s;

        /* 1.取值方位名词 最多 */
        /* transform-origin: right bottom; */
        transform-origin: center center;
        /* 2.具体的像素单位（正负均可） */
        /* transform-origin: -125px 0; */
        /* transform-origin: 125px 0; */
        /* 3.百分比(参照于盒子自身尺寸) */
        /* transform-origin: -50% 0; */
        /* transform-origin: 50% 0; */
      }

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

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

4、多重转换（transform复合属性写法）

4-1.目标

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

4-2.多重转换原理

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

4-3.案例

<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>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 800px;
        height: 200px;
        border: 1px solid #000;
        margin: 200px auto;
      }

      img {
        width: 200px;
        transition: all 2s;
      }

      /* 走到右侧并且旋转一周 */
      .box:hover img {
        /* 
        注意点：旋转会改变坐标轴方向
        当平移与旋转一起使用的时候，要把平移放在旋转的前面
         */

         /* transform 复合属性，复合了平移，旋转，缩放 */
         /* 注意点：平移和旋转如果一起使用，必须要先写平移再写旋转，因为旋转会改变坐标轴的方向 */

         transform: translate(600px) rotate(720deg);
      }
    </style>
  </head>

  <body>
    <div class="box">
      <img src="./images/tyre1.png" alt="" />
    </div>
  </body>
</html>

5、缩放

5-1.目标

使用scale改变元素的尺寸

5-2.语法

transform: scale(x轴缩放倍数, y轴缩放倍数);

5-3.技巧

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小

5-4.案例

<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-sizing: border-box;
      }

      .box {
        width: 250px;
        height: 200px;
        border: 1px solid #000;
        margin: 100px;
        line-height: 1.5;
        /* 溢出隐藏 */
        overflow: hidden;
      }

      .pic img {
        width: 100%;
      }

      .pic {
        position: relative;
      }
      .pic::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(5);
        width: 58px;
        height: 58px;
        background: url(./images/play.png);
        transition: 300ms;
        opacity: 0;
      }
      /* 刚开始的状态，图片放大5倍且要透明 */

      /* 当鼠标移在box上时，要显示出正常倍数的播放图片 */
      .box:hover .pic::after {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1);
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="pic">
        <img src="./images/party.png" alt="" />
      </div>
      <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
    </div>
  </body>
</html>

四、渐变

1.目标

使用background-image属性实现渐变背景效果

2.说明

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

3.语法

4.案例

<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>
       * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
       }
      .box {
        width: 300px;
        height: 200px;
        border: 2px solid orange;

        /* 
        背景颜色渐变 bgi   background-image: linear-gradient(参数1, 参数2, 参数3, ....);
        参数1：
          方位：默认的方位从上到下
            1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
            2.角度deg：直接写度数即可，不用再加to

        参数2：颜色1；
        参数3：颜色2；.....
         */
        background-image: linear-gradient(135deg, green , orange);
      }
    </style>
  </head>

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

移动web总结一

一、字体图标

1.目标

2.特点

3.字体图标的优点：

4.图标库

5.下载字体包

6.使用字体图标

二、过度

注意点

1、什么是过度

2、过渡属性

1.transition-property

2.transition-duration

3.transition-timing-function

4.transition-delay

3、过渡的简写

1.注意点

三、平面转换

1、目标

2、特点

3、平面转换属性

1、位移

1-1.语法

1-2.取值（正负均可）

1-3.技巧

1-4.案例

2、旋转

2-1. 语法

2-2.技巧：取值正负均可

2-3.案例

3、转换原点

3-1.目标

3-2.语法

3-3.取值

3-4.案例

4、多重转换（transform复合属性写法）

4-1.目标

4-2.多重转换原理

4-3.案例

5、缩放

5-1.目标

5-2.语法

5-3.技巧

5-4.案例

四、渐变

1.目标

2.说明

3.语法

4.案例