css3 更换图片行走

CSS3是一个非常强大的开发工具，它不仅可以帮助我们设计出美观的网页，还可以帮助我们实现一些炫酷的效果，如更换图片行走。

div class="walk">
    ul>
    li class="walk1">
    /li>
    li class="walk2">
    /li>
    li class="walk3">
    /li>
    /ul>
    /div>
    

以上是更换图片行走的基本HTML结构，我们可以看到这里使用了一个ul标签，里面包含三个li标签，每个li标签对应一张图片。下面我们来使用CSS3给每张图片添加动画效果。

style>
.walk {
    position: relative;
    margin: 0 auto;
    width: 500px;
    height: 300px;
    overflow: hidden;
}
.walk ul {
    position: absolute;
    left: 0;
    top: 0;
}
.walk li {
    width: 166px;
     height: 300px;
     display: inline-block;
    background: url('img/walk.png') no-repeat;
}
.walk1 {
    background-position: 0 0;
    animation: walk 1s steps(3) infinite;
}
.walk2 {
    background-position: -166px 0;
    animation: walk 1s steps(3) infinite;
    animation-delay: 0.2s;
}
.walk3 {
    background-position: -332px 0;
    animation: walk 1s steps(3) infinite;
    animation-delay: 0.4s;
}
@keyframes walk {
0% {
     background-position: 166px 0;
 }
100% {
     background-position: 0 0;
 }
}
    /style>
    

以上是CSS3关于更换图片行走的代码片段，我们可以看到第一步是给walk容器设置了position:relative，然后通过设置overflow:hidden来隐藏超出容器范围的内容。接着给li标签设置了background属性，指定了默认的背景图片，也就是walk.png。

在设置完li标签的背景图片后，我们还将每个li标签设置了不同的background-position属性值，用于定位每张图片的位置。然后再使用animation属性，在keyframes中定义walk动画具体的步骤。

最后看一下效果，我们可以看到三条小狗在草地上走动，形成了非常有趣的效果。这就是使用CSS3实现更换图片行走的简单方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！