米兔和奔跑的小人动画实现，利用css中的transition就可以实现，鼠标hover的时候，动态显示
做的步骤如下：
第一步：找到需要使用的米兔图片和小人图片，如下图：
第二部，右单击图片查看属性，如图：
宽为528px，高为271px
宽为474px，高为70px
第三部编程实现动画效果，代码如下：
<!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>
</head>
<style>
.box1{
margin: 0 auto;
width: 132px;
height: 271px;
background-image: url(./img/米兔.png);
transition: 0.3s steps(3);
}
.box1:hover{
background-position: -396px 0px;
}
.box2{
margin: 200px auto;
width: 59px;
height: 70px;
background-image: url(./img/奔跑小人.jpg);
transition: 0.4s steps(7);
}
.box2:hover{
background-position: -415px 0px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果展示：
