利用CSS让精灵图动起来

主要使用了动画效果，精灵图的载在展示框中移动，展示框在可视屏幕上移动，就产生了🐻在奔跑的假象

下面做出来是这个效果：请添加图片描述

CSS的动画animation

1、动画的基本使用

制作动画分为两步︰ 1．先定义动画 2．再使用(调用)动画

我通过例题向大家展示一下动画是什么： style标签里的内容，

 div{
     width: 20px;
     height: 20px;
     background-color: green;
     animation: changeswidth 6s infinite steps(14);alternate;
 }
@keyframes changesbig{
//这个0%表示开始状态
	0%{
	  width:20px;
	}
//这个100%表示结束状态
	100%{
	  width: 300px;
	}
}

body标签里的内容，

  <div></div>

运行出来的效果GIF展示如下请添加图片描述

2、来揭晓一下她的属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称。（必须的)
animation-duration	规定动画完成—个周期所花费的秒或毫秒，默认是0。（必须的)
animation-timing-function	规定动画的速度曲线，默认是“ease”
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite（无线
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal "，“alternate”逆播放
animation-fill-mode	规定动画结束后状态，保持当前状态forwards 回到起始backwards

根据上面属性我们写一个熊的奔跑效果，

其实就是在雪碧图上面进行跳动，来显示一定范围大小的图片，

准备材料：一张雪碧图片请添加图片描述

拆分功能：

实现雪碧图在向后移动
实现显示的范围大小向右侧移动，移动到一定位置后，不在改变位置
综合上面两者

实现功能：雪碧图在向后移动

<!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>
        body{
            /*给背景颜色更好的看出熊的姿态*/
            background-color: #ccc;
        }
        .bear{
             /*熊的图片宽度是1600px*/
            position: relative;
            overflow: hidden;
            height: 100px;
            width: 200px;
            background-image: url('./bear.png');
            /*不重复出现*/
            background-repeat: no-repeat;
            /*bear动画名字 .4s一个周期 steps(8)是8格*200=1600px长度 infinite循环播放*/
            animation: bear .4s steps(8) infinite;
        }
       
        @keyframes bear {
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1600px 0;
            }
        }
    </style>
</head>
<body>
    <div class="bear"> 
    </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>
        body{
            /*给背景颜色更好的看出熊的姿态*/
            background-color: #ccc;
        }
        .bear{
            /*熊的图片宽度是1600px*/
            position: relative;
            overflow: hidden;
            height: 100px;
            width: 200px;
            background-image: url('./bear.png');
            /*不重复出现*/
            background-repeat: no-repeat;
            animation: move 8s ease forwards;
        }
       
        @keyframes move {
            0%{
                left: 0;
                top: 0;
            }
           100%{
                left: 50%;
                transform: translate(-50% -50%);
            }
        }

    </style>
</head>
<body>
    <div class="bear"> 
    </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>
        body{
            background-color: #ccc;
        }
        .bear{
             /*熊的图片宽度是1600px*/
            position: relative;
            overflow: hidden;
            height: 100px;
            width: 200px;
            background-image: url('./bear.png');
            /*不重复出现*/
            background-repeat: no-repeat;
            /*bear动画名字 .4s一个周期 steps(8)是8格*200=1600px长度 infinite循环播放*/
            animation: bear .4s steps(8) infinite,move 8s ease forwards;
        }
       
        @keyframes bear {
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1600px 0;
            }
        }
        @keyframes move {
            0%{
                left: 0;
                top: 0;
            }
           100%{
                left: 50%;
            
                transform: translate(-50% -50%);
            }
        }
    </style>
</head>
<body>
    <div class="bear"> 
    </div>
</body>
</html>