CSS进阶

1.字体图标

1.1介绍

字体图标展示的是图标，本质是字体
处理简单的，颜色单一的图片
字体图标的优点：灵活性轻量级兼容性使用方便

1.2使用

引入字体图标样式表

<link rel="stylesheet" herf="./iconfont.css">

调用图标对应的类名，必须调用两个类名

iconfont类：基本样式，包含字体的使用等

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>字体图标的基本使用-类名</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .iconfont{
            font-size: 200px;
            color: green;
        }
        span{
            /* color: red; */
        }
    </style>
</head>
<body>
    <!-- inconfont 是固定的 -->
    <span class="iconfont icon-add-cart"></span>
</body>
</html>

（案例）淘宝购物车

<!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>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }

        a{
            color: #333;
            text-decoration: none;
        }

        .nav{
            width: 200px;
            margin: 50px auto;
            font-size: 12px;
        }

        .icon-add-cart{
            color: orange;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-add-cart"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

注：如果图标库没有所需要的图标怎么办？

自己在网站上传svg格式的图标后下载

2.平面转换

2.1平面转换的概念

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

2.2位移

语法：transform：translate（水平移动距离,垂直移动距离）
取值（正负均可）：

像素单位数值

百分比（参照物为盒子自生尺寸）

translate()如果只给出一个值，表示x轴方向移动
单独设置某个方向的移动距离：transformX()&transformY()

*注意:X轴正向为右，Y轴正向为下

2.3绝对定位居中

<!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>Document</title>
    <style>
        .father{
            position:relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;

        }
        .son{
            position: absolute;
            left: 50%;
            top: 50%;
            /* 改变盒子的位置 */
            /* margin-left: -100px; */
            /* margin-top: -50px; */
            transform: translate(-50%,-50%);

            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

（案例）双开门

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url(./images/bg.jpg);
            /* 超出父级范围的隐藏 */
            overflow: hidden;
        }
        /* 左右相同的样式 */
        /* 伪元素：行内显示模式 */
        .box::before,
        .box::after{
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all 0.5s;
            
        }

        /* 单独控制after的背景图位置 */
        .box::after{
            background-position: right 0;
        }

        .box:hover::before{
            transform: translate(-100%);
        }

        .box:hover::after{
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

2.4旋转

语法：transform：rotate（角度）

注意：角度的单位是deg，

取值为正，则顺时针旋转

取值为负，则逆时针旋转

2.5转换原点

语法：默认原点是盒子中心点

transform-origin:原点水平位置原点垂直位置；

取值：方位名词

像素单位数值

百分比（参照盒子自身尺寸计算）

<!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>Document</title>
    <style>
        img{
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            /* 添加给标签本身，不要加到hover */
            transform-origin: right bottom;
            transform-origin: left bottom;
        }
        img:hover{
            transform: rotate(360deg);

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

注：添加到标签本身，不要加到hover

原点水平位置和垂直位置之间用空格隔开，不是逗号

2.6多重转换

多重转换技巧：

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

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

        .box:hover img{
            transform: translate(600px) rotate(720deg);
            /* 不行，旋转会改变坐标轴向，先旋转改变了坐标轴向，位移会受到影响 
            多重转换如果涉及到旋转，往最后书写*/
            /* transform:rotate(720deg) translate(600px) ; */
            /* transform分开写不行，会发生层叠 */
            /* transform: translate(600px); */
            /* transform: rotate(720deg); */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/tyre.png" alt="">
    </div>
</body>
</html>

注：

不能先写旋转再写位移，旋转会改变坐标轴向，先旋转改变了坐标轴向，位移会受到影响，多重转换如果涉及到旋转，往最后书写
不能把transform分开写，会发生层叠。

2.7缩放

语法：transform：scale（x轴缩放倍数，y轴缩放倍数）
技巧：x轴y轴等比例缩放：transform:scale(缩放倍数)。scale值大于1表示放大，小于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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        img{
            width: 100%;
        }

        .box{
            width: 249px;
            height: 210px;
            margin: 50px auto;
            /* 超出父级的隐藏 */
            overflow: hidden;
        }

        .box p{
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }

        .box .pic{
            position: relative;

        }
        /* 1.播放按钮盒子，压在img标签的上面（定位）
           2.hover的时候缩放效果 */
        .box .pic::after{
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -29px;
            margin-top: -29px; */
            /* transform: translate(-50%,50%); */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./imageshe/play.png);
            transform: translate(-50%,-50%) scale(5);
            /* 透明度-opacity */
            /* opacity: 0; */

            transition: all .5s;
        }
        .box li :hover.pic::after{
            opacity: 1;
            transform: translate(-50%,-50%) scale(1);
        }
    </style>
</head>
<body>
    <div class="box">
    <ul>
        <li>
            <div class="pic">
                <img src="./imageshe/party.jpeg" alt="">
            <!-- 伪元素添加播放按钮 -->
                
            </div>
            <p> 【和平精英】“出火音乐概念篇：四圣觉醒······”</p>
        </li>
    </ul>
</div>
</body>
</html>

3.渐变

3.1渐变的介绍

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

background-image：linear-gradient（

颜色1；

颜色2

）；

<!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>Document</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: pink;
            background-image:linear-gradient(pink,green ,blue);

            /* 工作中常用:半透明渐变：透明-rgba() */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.2产品展示

略

4.空间转换

4.1空间转换的概念

空间：是从坐标轴角度定义的。x,y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同(正值指向屏幕外)
空间转换也叫3D转换
属性：transform
语法：transform：translate3d(x,y,z);

transform：translateX(值);

transform：translateY(值);

transform：translateZ(值);
取值（正负均可）：

像素单位数值

百分比

4.2空间位移

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      /* transform: translate3d(50px 100px 200px); */
      transform: translateX(100px);
      transform: translateY(100px);
      transform: translateZ(100px);
    }
  </style>
</head>

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

</html>

注：这时z轴方向的改变看不出来

4.3透视

透视效果：近大远小，近清楚远模糊

属性（添加给父级）：

perspactive:值

取值：像素单位数值，数值一般在800-1200。

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

应用：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
      perspective: 1000px;
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      transform: translateZ(-200px);

    }
  </style>
</head>

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

</html>

4.4空间旋转

语法：transform:rotateZ(值)；

<!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>空间旋转-Z轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

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

        .box img:hover {
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

transform:rotateX(值);

<!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>空间旋转-X轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

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

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateX(60deg);
            transform: rotateX(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

transform:rotateY(值)；

<!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>空间旋转-Y轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

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

        .box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateY(60deg);
            transform: rotateY(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

4.5左手法则

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

*扩展（了解）

rotate3d(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度

x,y,z取值为0-1之间的数字

4.6立体呈现

实现方法：添加transform-style:preserve-3d;

使子元素处于真正的3d空间

默认值flat,表示子元素处于2d平面内呈现

<!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>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;

            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            <--拉开距离，产生3D空间-->
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }
        .cube:hover{
            transform: rotateY(180deg);
        }

    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

(案例)3D导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 可以在写代码的过程中看到立体盒子 */
            /* 先写一个旋转，看起来更方便，后面再删掉 */
            /* transform: rotateX(-20deg) rotateY(30deg); */
        }

        .navs li a{
            position: absolute;
            left: 0;
            right: 0;

            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
<--以能看到面正面的方向为标准-->
            transform: rotateX(90deg) translateZ(20px)
        }

        /* li:hover 立方体旋转 */
        .navs li:hover{
            transform: rotateX(-90deg);
        }

        
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

注：rotate Z()和rotate()的视觉效果是一样的

4.7空间缩放

语法：

transform；sccaleX(倍数)

transform；sccaleY(倍数)

transform；sccaleZ(倍数)

transform；sccaleX(x,y,z)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 可以在写代码的过程中看到立体盒子 */
            /* 先写一个旋转，看起来更方便，后面再删掉 */
            /* transform: rotateX(-20deg) rotateY(30deg); */

            /* 空间缩放测试 */
            transform:scale3d(0.5 ,1.2 ,3);
        }

        .navs li a{
            position: absolute;
            left: 0;
            right: 0;

            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px)
        }

        /* li:hover 立方体旋转 */
        .navs li:hover{
            transform: rotateX(-90deg);
        }

        
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

5.动画

5.1简介

过渡实现的效果：实现两个状态间的变化过程

动画效果：实现多个状态之间的变化过程，动画的过程可控（重复播放、最终画面、是否暂停）

5.2动画的使用步骤

实现步骤： 1.定义动画

keyframes 动画名称{

from{}

to{}

}

keyframes 动画名称{

10%

15%

100%

}

2.使用动画

animation:动画名称动画花费时长

<!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: 200px;
            height: 100px;
            background-color: pink;
            /* 使用动画 */
            animation:change 1s;

            
        }

        /* 一. 定义动画:从200变大到600 */ 
         @keyframes change{
            from{
                width: 200px;
            }
            to{
                width: 600px;
            }
        }
        /* @keyframes change{
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height:300px;
            }
            100%{
                width:800px;
                height:500px;
            }

        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        
    </style>
</head>
<body>
    <div class="box" ></div>
</body>
</html>

5.3动画属性

animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态；
注意：动画名称和动画时长必须赋值

取值不分先后顺序

如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

各属性值详情

速度曲线：linear——匀速（还有加速减速，但他们在工作中一般都不被设置）

step(步数)——分步动画

重复次数：infinite——无限循环

动画方向：alternate

执行完毕时状态：backwards——默认值，停留在初始状态

forwards——动画停留在结束的状态

<!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>animation复合属性</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* animation: change 1s linear; */

            /* 分步动画 */
            animation: change 1s steps(3) ;

            /* 延迟时间 */
            animation: change 1s steps(3) 1s;

            /* 重复次数 */
            animation: change 1s steps(3) 1s 3;

            /* 无限循环 */
            animation:change 1s infinite;

            /* 加反向效果 */
            animation:change 1s infinite alternate;

            /* 动画执行完毕时状态 */
            animation: change 1s backwards;
            animation: change 1s forwards;
        }

        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

5.4animation拆分写法（了解）

.box:hover {
           /* 鼠标移入的时候暂停动画 */
           animation-play-state: paused;
        }

补间动画

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

5.5精灵动画(小人原地跑)

animation-timing-function:steps(N);
- 将动画过程等分成N份
精灵动画制作步骤
- 准备显示区域：设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
- 定义动画：改变背景图的位置（移动的距离就是精灵图的宽度）
- 使用动画：添加速度曲线steps（N），N与精灵图上小图个数相同，添加无限重复效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 准备显示区域：1680/12 */
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./images/bg.png);
      /*  */
      animation: move 1s steps(12) infinite;
    }

@keyframes move{
  from{
    background-position: 0,0;
  }
  to{
    background-position: -1680px 0;
  }
}
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

5.6多组动画（小人移动跑）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 准备显示区域：1680/12 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);
      /*  */
      animation: move 1s steps(12) infinite,
      run 1s forwards;
    }

@keyframes move{
  /* from{
    background-position: 0,0;
  } */
  to{
    background-position: -1680px 0;
  }
}
@keyframes run{
  /* from{ */
    /* 动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码*/
    /* transform:translateX(0); */
  /* } */
  to{
    transform: translateX(800px);
  }
}
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

注：动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码

综合案例——走马灯（无缝动画）

因为显示区域是三张图，所以复制三张

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;

      }

      .box li {
        float: left;
      }

      .box ul{
        width: 2000px;
        animation: move 5s infinite linear;


      }
      /* 定义动画，位移，ul,左侧移动 x -1400px*/
      @keyframes move{
        to{
          transform: translate(-1400px);

        }
      }
      /* 用户鼠标移入box,动画暂停 */
      .box :hover {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>
        <!-- 在567移动的时候，显示区域不能留白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>

CSS字体图标，平面及空间转换，渐变，动画

CSS进阶

1.字体图标

1.1介绍

1.2使用

（案例）淘宝购物车

2.平面转换

2.1平面转换的概念

2.2位移

2.3绝对定位居中

（案例）双开门

2.4旋转

2.5转换原点

2.6多重转换

2.7缩放

（案例)和平精英

3.渐变

3.1渐变的介绍

3.2产品展示

4.空间转换

4.1空间转换的概念

4.2空间位移

4.3透视

4.4空间旋转

4.5左手法则

*扩展（了解）

4.6立体呈现

(案例)3D导航

4.7空间缩放

5.动画

5.1简介

5.2动画的使用步骤

5.3动画属性

5.4animation拆分写法（了解）

5.5精灵动画(小人原地跑)

5.6多组动画（小人移动跑）

综合案例——走马灯（无缝动画）