[分享]css几张图片人如何做成动画效果

CSS中可以用动画效果来制作人物动画，下面我们就来讲一讲几张图片人如何做成动画效果。首先，先准备好这几张图片，用pre标签来展示，如下： .walk1 { backgroundimage: url(1...

CSS中可以用动画效果来制作人物动画，下面我们就来讲一讲几张图片人如何做成动画效果。

首先，先准备好这几张图片，用pre标签来展示，如下：

  .walk1 {
        background-image: url('1.png');
        width: 100px;
        height: 100px;
    }

    .walk2 {
        background-image: url('2.png');
        width: 100px;
        height: 100px;
    }

    .walk3 {
        background-image: url('3.png');
        width: 100px;
        height: 100px;
    }

    .walk4 {
        background-image: url('4.png');
        width: 100px;
        height: 100px;
    } 

接下来，我们定义关键帧，使用keyframes标签，让图片动起来：

  .animation {
        animation-name: walk;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }

    @keyframes walk {
        0% {
            background-position-x: 0;
        }

        25% {
            background-position-x: -100px;
        }

        50% {
            background-position-x: -200px;
        }

        75% {
            background-position-x: -300px;
        }

        100% {
            background-position-x: -400px;
        }
    } 

其中，animation-name用来指定动画名，animation-duration表示动画持续时间，animation-iteration-count表示动画循环次数。

最后，我们将几张图片和动画关键帧结合起来，就能得到人物动画了：

  <div class="animation walk1"></div>
    <div class="animation walk2"></div>
    <div class="animation walk3"></div>
    <div class="animation walk4"></div> 

以上就是如何将几张图片做成动画效果的方法，希望对大家有用。