米兔和奔跑的小人动画实现，利用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>
效果展示：
