html5实现GIF图效果

最新推荐文章于 2024-04-29 21:30:00 发布

原创最新推荐文章于 2024-04-29 21:30:00 发布 · 6k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍如何使用纯CSS实现一个简单的角色行走动画效果。通过设置背景图片和关键帧动画，使得角色能够在网页中连续播放不同的行走帧，形成流畅的动画效果。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>www.44wa.com</title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           .box{
               width: 180px;
               height: 300px;
               margin: 50px auto;
               overflow: hidden;

           }
           .run{
               width: 180px;
               height: 300px;
               background: url(images/images/charector.png) no-repeat ;//图片素材自己找。。。
               -webkit-animation:run 700ms steps(7) infinite;
           }
           @-webkit-keyframes run{
               from{
                   background-position: 0 0;
               }
               to{
                   background-position: -1260px 0;
               }
           }
       </style>
   </head>
   <body>
       <div class="box">
           <div class="run">

           </div>

       </div>
   </body>
</html>