css中控制图片滑动

在 CSS 中，我们可以使用 transform 属性来控制图片的滑动效果。该属性可以通过设置 translateX 和 translateY 属性值来移动元素的位置。

首先我们需要在 HTML 中添加一个 img 元素来加载图片，并设置一个包含这个 img 元素的 div 容器。

 <style>
    .container {
      position: relative;
      overflow: hidden;
    }
    .container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
  
  <div class="container">
    <img src="image.jpg" alt="My Image">
  </div> 

上面的样式代码将创建一个占满整个容器的 img 元素，并将其设置为绝对定位。此外，我们也将容器设置为相对定位并隐藏溢出的内容。

接下来，我们可以使用 transform 属性来设置在 X 轴上移动图片的变换。以下是一个例子：

 <style>
    .container {
      position: relative;
      overflow: hidden;
    }
    .container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: transform 0.5s ease;
    }
    .container:hover img {
      transform: translateX(-50%);
    }
  </style>
  
  <div class="container">
    <img src="image.jpg" alt="My Image">
  </div> 

上面的代码将会在鼠标悬停在容器上时，让图片向左移动 50% 的宽度。该效果将在 0.5 秒内完成，并采用缓动函数来平滑过渡。

还可以通过设置 transition 属性来控制动画过渡的时间和过渡类型。应用鼠标事件的方式可以随心所欲地控制图片的滑动效果。