Web---2D&3D 转换与动画

一、字体图标

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

1.iconfont的使用

1）iconfont的网址

iconfont-阿里巴巴矢量图标库

2）生成iconfont文件，导入到项目

a.创建项目

b.创建好项目

c.选择自己要使用的图标，点击上面的购物车

d.点击购物车添加到项目

e.在我的项目中点击下载到本地

f. 下载完成以后就会有如下的文件，导入到项目中使用就可以

2.购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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-cart-Empty-fill {
            font-size: 20px;
        }

        .orange {
            color: #f40;
        }

    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill orange"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

a.使用link的方式导入iconfont.css文件

b.使用字体图标的地方添加iconfont类，然后在添加上对应图标的类名，如果想修改图片的大小，一定要修改font-size，因为是字体图标

3.上传矢量图：

思考：如果图标库没有项目所需的图标怎么办？

答：IconFont网站上传矢量图生成字体图标

1）与设计师沟通，得到SVG矢量图

2）IconFont网站上传图标，下载使用

a.上传SVG图

b.提交自己选择的SVG图

c. 将自己上传的图标添加到项目

d.和生成iconfont文件夹操作步骤一致进行操作

二、平面转换

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

平面转换：

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

2D转换

平面转换属性：

transform

学习路径：

1.位移

a.目标：使用translate实现元素位移效果

b.语法：

transform:translate(水平移动距离，垂直移动距离）

c.取值（正负均可）：

像素单位数值

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

注意：X轴正向为右，Y轴正向为下

d.技巧

translate()如果只给出一个值，表示x轴方向移动距离

单独设置某个方向的移动距离：tanslateX()&translateY()

<!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>
        .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }

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

        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
            /* transform: translate(100px,50px); */
            /* margin-left: 100px;
            margin-top: 50px; */
            /* 百分比：盒子自身尺寸的百分比 */
            /* transform: translate(100%,50%); */
            /* 只表示一个轴移动 */
            transform: translate(100px);
            transform: translateY(100px);
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="son">

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

e.位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

<!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>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        /* 定位之后的元素不能使用margin:0 auto来进行空间居中，所以使用百分比来进行定位  */
        .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>

f.实现双开门效果

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background-image: 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;
        }

        .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>

2.旋转

目标：使用rotate实现元素选择效果

1）语法：

transform:rotate(角度）

注意：角度单位是deg

2）技巧：取值正负均可

取值为正：则顺时针旋转

取值为负：则逆时针旋转

<!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>
        img {
            width: 250px;
            transition: all 2s;
        }

        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="images/rotate.png" alt="">
</body>
</html>

3.转换原点

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

1）语法：

默认原点是盒子中心点

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

2）取值：

方位名词（left、top、right、bottom、center)

像素单位数值

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

<!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>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            /* 改变中心点 */
            transform-origin: right bottom;
        }

        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="images/rotate.png" alt="">
</body>
</html>

4.多重效果转换

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

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

        .box:hover img {
            /* 边走边转 先移动后旋转*/
            /* transform: translate(600px) rotate(360deg); */
            /* 旋转会改变坐标轴 */
            transform: rotate(360deg) translate(600px);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/tyre.png" alt="">
    </div>
</body>
</html>

5.缩放

1）目标：使用scale改变元素的尺寸

2）语法：

transform:scale(x轴缩放倍数，y轴缩放倍数）;

3）技巧：

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

transform:scale(缩放倍数）

缩放倍数如果大于1表示放大，小于1表示缩小

4）案例1:

<!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>
        .box {
           width: 200px;
           height: 210px;
           margin: 100px auto;
           background-color: pink;
           overflow: hidden;
        }

        .box img {
            /* width: 100%; */
           width: 200px;
           height: 210px;
            transition: all 0.5s;
        }

        .box:hover img {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/product.jpg" alt="">
    </div>
</body>
</html>

5）案例2:

<!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>
        * {
            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;
        }

        .box .pic::after {
           position: absolute;
           left: 50%;
           top: 50%;
           /* margin-left: -29px;
           margin-top: -29px; */
           content: '';
           width: 58px;
           height: 58px;
           background-image: url(images/play.png);
           transform:translate(-50%,-50%) scale(5);
           transition: all 0.5s;
           /* 0是看不见 */
           opacity: 0;
        }
        /* li:hover的时候，after变小 */
        /* 注意transform的层叠性 */
        .box li:hover .pic::after{
            transform:translate(-50%,-50%) scale(1);
            opacity: 1;
        }

    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="images/party.jpeg" alt="">
                </div>
                <p>【和平精英】"初火"音乐概念片，四圣觉醒......</p>
            </li>
        </ul>
    </div>
</body>
</html>

三、渐变

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

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

1.案例一

<!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>
        .box {
            width: 300px;
            height: 200px;
            background-image: linear-gradient(
                /* 透明 */
                transparent,
                rgba(0,0,0,0.6)
            );
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

实现的效果：

2.案例二

<!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>

        .box {
           position: relative;
        }

        .box img {
            width: 300px;
        }

        .box .title {
            position: absolute;
            left: 15px;
            bottom: 20px;
            z-index: 2;
            width: 260px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }

        .box .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient(
                /* 透明 */
                transparent,
                rgba(0,0,0,0.6)
            );
            opacity: 0;
            /* display: none; */
            transition: all 0.5s;
        }

        .box:hover .mask{
            opacity: 1;
            /* background-image: linear-gradient(
                /* 透明 */
                /* transparent,
                rgba(0,0,0,0.6)
            ); */ 
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 interop金奖</div>
        <!-- 实现渐变背景 mask-->
        <div class="mask"></div>
    </div>
</body>
</html>

四、空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

1）空间：是从坐标轴角度定义的，x、y、和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

2）空间转换也叫3D转换

3）属性：transform

学习路径：

1.空间位移

1）目标：使用translate实现元素空间位移效果

2）语法：

transform:translate3d(x,y,z)

transform:translateX(值)

transform:translateY(值)

transform:translateZ(值)

3）取值（正负均可）

像素单位数值

百分比

4）案例：如果只加transform的话z轴是看不到效果的

<!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>
        .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>

2.透视

1）目标：使用perspective属性实现透视效果

2）思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

答：近大远小，近清楚远模糊

3）思考：默认情况下，为什么无法观察到Z轴位移效果？

答：Z轴是视线方向，移动效果应该是距离的远和近，电脑屏幕是平面，默认无法观察远近效果

4）属性（添加给父级）

a.perspective:值

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

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

5）案例：正值的话看的效果会变大，负值的话看的效果会变小

<!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>
        body {
           perspective: 1000px;
        }

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

        .box:hover {
            transform: translate3d(200px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.空间旋转

1）目标：使用rotate实现元素空间旋转效果

2）语法：transform:rotateZ(值）

3）rotateZ是围绕Z轴旋转，rotateZ的效果跟平面的效果是一样的

<!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>
        .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>

4）rotateX是绕X轴来旋转的，正值是朝里旋转的，负值是朝外旋转的

<!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>
        .box {
            width: 300px;
            margin: 100px auto;
        }

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

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

        .box img:hover {
           transform: rotateX(40deg);
        }


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

效果：

5）rotateY是围绕Y轴来进行旋转，如果是正值就朝向里面，如果是负值就朝向外面

<!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>
        .box {
            width: 300px;
            margin: 100px auto;
        }

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

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

        .box img:hover {
           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之间的数字

6.立体呈现

1）目标：使用transform-style:preserve-3d呈现立体效果

2）实现方法：

添加transform-style:preserve-3d

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

3）呈现立体图形步骤

<!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>
        .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;
            right: 0;
            width: 200px;
            height: 200px;
            transition: all 0.5s;
        }

        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }
        
        .back {
            background-color: green;
        }
         
        /* 为了看空间效果 */
        .cube:hover {
           transform: rotateY(90deg);
        }

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

实现的效果：

7.空间缩放

1）目标：使用scale实现空间缩放效果

2）语法：

a.transform:scaleX(倍数)

b.transform:scaleY(倍数)

c.transform:scaleZ(倍数)

d.transform:scale3d(x,y,z)

3）缩放必须针对于立体呈现的才能进行缩放

在下面的导航案例里面直接添加缩放属性就可以

        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all 0.5s;
            transform-style: preserve-3d;
            transform: scale3d(0.5,1.1,2);
        }

4）实现的效果就是原来是小的，等着hover的时候变大

8.3D导航

1）目标：使用立体呈现技巧实现3D导航效果

2）实现思路

搭建立方体：

a.li标签添加立体呈现属性transform-style:preserve-3d;

添加旋转属性（为了便于观察效果，案例完成后删除即可）

b.调节a标签的位置

a.标签定位（子绝父相）

b.英文部分添加旋转和位移样式

c.中文部分添加位移样式

<!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>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }

        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all 0.5s;
            transform-style: preserve-3d;
            /* 旋转：让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(39deg); */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 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;
            /* 躺平是x轴旋转的，立方体的顶部，位移z（确保看到这个盒子） */
            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>

实现的效果就是当鼠标hover的时候，英文页面向我们扑向倒过来

五、动画

目标：使用animation添加动画效果

1.思考：过渡可以实现什么效果？

答：实现2个状态间的变化过程

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

3.动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

4.构成动画的最小单元：帧或动画帧

5.实现步骤：

1）定义动画

2）使用动画

6.案例一：

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

        /* 一、定义动画，从200变大到600 */
            @keyframes change {
                from {
                   width: 200px;
                }

                to {
                   width: 600px;
                }
            }

        /* 二、定义动画，200到500*300到800*500 */

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

实现的效果就是不需要去hover，在刷新的时候就能有效果产生，产生完成效果之后会回到原来的初始展示模式

7.案例二：


        /* 二、定义动画，200到500*300到800*500 */
        /* 百分比指的是动画总时长的占比，比如这个动画完成是1秒，从200px到宽度为500px的变化占用百分之五十也就是占用0.5秒 */
        @keyframes change {
            0% {
                width: 200px;
            }

            50% {
                width: 500px;
                height: 300px;
            }

            100% {
                width: 800px;
                height: 500px;
            }
        }

8.动画属性

1）目标：使用animation相关属性控制动画执行过程

2）注意：

动画名称和动画时长必须赋值

取值不分先后顺序

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

<!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>
         .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 使用动画 */
            /* animation: change 1s linear; */
            /* steps是分布动画， */
            /* 3：重复3次播放 */
            /* animation: change 1s steps(2) 1s 3; */
            /* 无限循环 */
            /* alternate动画方向 */
            /* animation: change 1s infinite alternate; */
            /* 动画完毕时 backwars时是默认值,动画停留在最初的状态 */
            /* 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>

3）animation拆分写法：

background复合属性：color image repeat attachment position;

background-color

background-image

background-repeat

background-attachment

background-position

<!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>
         .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: infinite;
        }

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

           @keyframes change {
                from {
                   width: 200px;
                }

                to {
                   width: 600px;
                }
            }

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

9.逐帧动画

1）目标：使用steps实现逐帧动画

2）配合精灵图做动画的时候使用

3）精灵动画制作步骤：

a.准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

b.定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

c.使用动画

添加速度曲线steps(N)，N与精灵图上小图个数相同

添加无限重复效果

<!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>
        .box {
            width: 140px;
            height: 140px;
            border: 1px solid #000;
            background-image: url(bg.png);
            animation: run 1s steps(12) infinite;
        }

        @keyframes run {
            /* 背景图改位置：从0，把整个图都挪走，图片的最大宽度为1680 */
            from {
                background-position: 0 0;
            }
            
            /* 精灵图都是负值 */
            to {
                background-position: -1690px 0;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

实现的效果是从一个小人在原地跑

10.多组动画

1）目标：能够使用animation属性给一个元素添加多组动画

2）多组动画

思考：如果想让小人跑远一点，该如何实现？

答：精灵动画的同时添加盒子位移动画

<!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>
        .box {
            width: 140px;
            height: 140px;
            /* border: 1px solid #000; */
            background-image: url(bg.png);
            animation: 
                move 1s steps(12) infinite,
                run 3s forwards
            ;
        }

        @keyframes move {
            /* 背景图改位置：从0，把整个图都挪走，图片的最大宽度为1680 */
            from {
                background-position: 0 0;
            }
            
            /* 精灵图都是负值 */
            to {
                background-position: -1680px 0;
            }
        }

        /* 定义一个盒子移动的动画 800px */
        @keyframes run {
            /* 动画的开始状态和盒子的默认样式相同的，可以省略开始状态的值 */
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(800px);
            }
        }


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

11.综合案例一：走马灯

12.综合案例二：全民出游

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>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 云彩图片 -->
   <div class="cloud">
    <img src="images/yun1.png" alt="">
    <img src="images/yun2.png" alt="">
    <img src="images/yun3.png" alt="">
   </div>
</body>
</html>

css代码：

* {
    margin: 0;
    padding: 0;
}

/* 高度为100%是父级高度的百分之百 */

html {
    height: 100%;
}

body {
    height: 100%;
    /* 背景图居中 center 0 */
    background: url(../images/f1_1.jpg) no-repeat center 0;
    /* 缩放背景图 */
    /* contain等比例缩放，等放大到盒子的一边相同就不放大了 */
    /* background-size: contain; */
    /* cover会等比例缩放，会覆盖整个区域，会导致图片显示不全 */
    background-size: cover;
}

.cloud {
    position: relative;
}

/* 
1.img引入图片 控制位置
2.定位动画，使用动画
 */
 .cloud img {
    position: absolute;
    left: 50%;
    top: 0;
 }

 .cloud img:nth-child(1) {
    margin-left: -300px;
    top: 20px;
    animation: cloud 1s alternate infinite;
 }

 .cloud img:nth-child(2) {
    margin-left: 400px;
    top: 100px;
    animation: cloud 1s alternate infinite 0.2s;
 }

 .cloud img:nth-child(3) {
    margin-left: -550px;
    top: 200px;
    animation: cloud 1s alternate infinite 0.4s;
 }

 /* 云彩动画 */
 @keyframes cloud {
    to {
        transform: translateX(20px);
    }
 }

实现的效果为：上面的云无限循环在动