动画小案例

西游动画

1. 首先我们看下作品的效果，从图上看西游4人是一个动态的走路的效果，这个时候我们会响起用动画 animation 来制作

 

 

2. 先看背景 显然是导入背景图 图是全屏 所以我们应该再css中设置body 的背景图

   body{
       background: url("./more/01.webp") no-repeat top center;
   }

3. 再看师徒4人 需要一个大盒子 包裹4个小盒子

     <div id="frome">
         <div class="monkey">
         </div>
         
         <div class="pag">
         </div>
         
         <div class="tang">
         </div>
         
          <div class="sha">
          </div>
   ​
      </div>

4. 设置大盒子的位置

   #frome{
       width: 800px;
       height: 240px;
       margin: 300px auto; 
       }

5. 每个独立的div盒子是块级标签独占一行的，这个时候我们需要设置浮动来解决一行的排列

   #frome div{
       float: left;
       height: 240px;
   }

6. 接下来设计猴子的动画走动，首先要导入背景，设置好猴子盒子的宽度让图片显示出来，让他动起来我们需要设置动画 animation : 动画名 运动时间 运动的帧数 以及运动的次数

   • end 代表 0%~100% 保留当前帧，快速过渡，效果看起来连贯

   • start 代表 保留下一整 20% ~0快速过渡，效果看起来会有段隔

   • /background-position 小图定位 只能够向右或者向下 这两值都是用负数表述/

   • .monkey{
         background: url("./more/01.png") no-repeat ;
         width: 200px;
         animation: monkey1  2s steps(8,end) infinite;
     }
     ​
     @keyframes monkey1{
         0%{
             background-position: 0 0 ;
         }
     ​
         100%{
             background-position: -1600px 0;
             /*background-position 小图定位 只能够向右或者向下 这两值都是用负数表述*/
         }
     }

   •  

7. 猴子走动设置好了接下来3位也就如法炮制

   • 需要注意的是每张图的大小和宽高都是不相同的，需要从下测量第一帧到第二帧的距离

   • .pag{
         background: url("./more/02.png") no-repeat;
         width: 200px;
         animation:pag1 2s steps(8,end) infinite;
     }
     ​
     @keyframes pag1{
         0%{
             background-position: 0 0 ;
     ​
         }
         100%{
             background-position: -1600px 0;
         }
     }
     ​
     .tang{
         background: url("./more/03.png") no-repeat;
         width:180px;
         animation: tang1 2s steps(8,end) infinite;
     }
     ​
     @keyframes tang1{
         0%{ 
             background-position: 0 0 ;
     ​
         }
         100%{
             background-position:-1360px 0;
         }
     }
     ​
     ​
     .sha{
         background: url("./more/04.png") no-repeat;
         width: 200px;
         animation:sha1 2s steps(8,end) infinite;
     }
     ​
     @keyframes sha1{
         0%{
             background-position: 0 0 ;
     ​
         }
         100%{
             background-position: -1680px 0;
         }
     }