西游记角色动画实现-CSDN博客

本文链接：https://blog.csdn.net/zzknb1/article/details/126241631

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .div-entirety{
               width: 1200px;
               height: 500px;
               background: url("../img/1_1.jpg");
               animation: backgroundMovie 7s linear infinite;
           }
           @keyframes backgroundMovie{
               0%{
                   background-position: -1920px;
               }
               100%{
                   background-position:0 ;
               }
           }

           .div-wu{
               width:200px ;//宽高和图片的分辨率有关，如悟空的图片分辨率就是1600*180的，因为这个悟空有8个小图片所以长就是1600/8
               height: 180px;
               background: url("../img/wk.png") no-repeat;
               position: absolute;//这里是就人物图片移动到他的位置上
               top: 210px;
               left: 270px;
               animation: wuMovie 1s steps(8) infinite;//steps()指逐步运动
           }
           @keyframes wuMovie{
               0%{
                   background-position:0 0;
               }
               100%{
                   background-position: -1600px 0;
               }
           }
           .div-zhu{
               width:200px ;
               height: 180px;
               background: url("../img/bj.png") no-repeat;
               position: absolute;
               top: 210px;
               left: 440px;
               animation: wuMovie 1s steps(8) infinite;
           }
           .div-tang{
               width:170px ;
               height: 240px;
               background: url('../img/ts.png') no-repeat;
               position: absolute;
               top: 180px;
               left:600px;
               animation: tangMovie 1s steps(8) infinite;
           }
           @keyframes tangMovie{
               0%{
                   background-position:0 0;
               }
               100%{
                   background-position: -1360px 0;
               }
           }
           .div-sha{
               width:210px ;
               height: 200px;
               background: url('../img/ss.png') no-repeat;
               position: absolute;
               top: 205px;
               left:740px;
               animation: ssdh 1s steps(8) infinite;
           }
           @keyframes ssdh{
               0%{
                   background-position:0 0;
               }
               100%{
                   background-position: -1680px 0;
               }
           }

//最终效果

       </style>
   </head>
   <body>
       <div class="div-entirety">
           <div class="div-wu"></div>
           <div class="div-zhu"></div>
           <div class="div-tang"></div>
           <div class="div-sha"></div>
       </div>
   </body>
</html>

人物移动动画