CSS3如何實現(xiàn)來回滾動動畫

在CSS3中，我們可以利用@keyframes規(guī)則來創(chuàng)建動畫，對于來回滾動動畫，我們可以使用transform屬性來實現(xiàn)，以下是一個簡單的示例：

1、定義一個名為scroll的動畫：

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

這個動畫會將元素從左側(cè)移動到右側(cè)，然后再移動回左側(cè)。translateX函數(shù)用于在水平方向上移動元素。

2、應(yīng)用動畫到元素：

.scroll-container {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}
.scroll-content {
  width: 400px;
  height: 200px;
  border: 1px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  animation: scroll 2s linear infinite;
}

在這個示例中，.scroll-container是容器，.scroll-content，我們將動畫應(yīng)用到.scroll-content上，使其來回滾動。animation屬性中的2s表示動畫持續(xù)時間為2秒，linear表示動畫速度均勻，infinite表示動畫無限循環(huán)。

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

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 內(nèi)容 -->
  </div>
</div>

將需要來回滾動的元素放在.scroll-content中，這樣，當(dāng)頁面加載時，元素就會自動來回滾動。