CSS控制圖片向右滾動的方法

在CSS中，我們可以使用animation和keyframes來創(chuàng)建動畫，從而實現(xiàn)圖片向右滾動的效果，以下是一個簡單的示例：

HTML結(jié)構(gòu)：

<div class="container">
  <img class="scroll-image" src="path/to/your/image.jpg" alt="Scrolling Image">
</div>

CSS樣式：

.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.scroll-image {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: scrollRight 5s linear infinite;
}
@keyframes scrollRight {
  from { right: 0; }
  to { right: -100%; }
}

在這個示例中，我們創(chuàng)建了一個名為scrollRight的動畫，該動畫會在5秒內(nèi)將圖片從右向左滾動100%，我們將這個動畫應(yīng)用到了.scroll-image上，并設(shè)置了infinite屬性，使其可以無限循環(huán)播放。

需要注意的是，這個示例中的圖片大小與容器相同，因此圖片在滾動時會保持其原始大小不變，如果你需要圖片在滾動時縮小或放大，可以使用transform屬性來實現(xiàn)。