html代码图片左右动

近年来，网站的动效设计越来越受到关注。其中，图片左右动效是一种常见的设计方式。

通过HTML和CSS代码，我们可以很容易地实现图片左右动效。下面就让我们来看一下具体的实现步骤。

  div class="container">
        img src="picture.jpg" class="move-left">
      /div>
      style>
    .container{
          width: 100%;
          height: 500px;
          display: flex;
          justify-content: center;
          align-items: center;
    }
      .move-left{
          position: relative;
          animation: moveLeft 2s ease infinite;
    }
      @keyframes moveLeft{
      0%{
            left: 0;
      }
      50%{
            left: -100px;
      }
      100%{
            left: 0;
      }
    }
      /style>
    

代码中，我们首先创建一个容器，使用flex布局居中显示图片。然后给图片添加相对定位，然后创建一个名为moveLeft的动画，让图片从0%的位置向左移动-100px，再在50%时回归原位，100%再次回到0%的位置。

这样，我们就成功实现了图片的左右移动效果。

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