CSS滾動文字怎么依次出來

在CSS中，我們可以使用animation和@keyframes來創(chuàng)建滾動文字，下面是一個簡單的示例，展示如何依次顯示滾動文字：

1、定義HTML結構：

<div class="scroll-container">
  <div class="scroll-text">
    <p>這是***段文字</p>
    <p>這是第二段文字</p>
    <p>這是第三段文字</p>
  </div>
</div>

2、編寫CSS樣式：

.scroll-container {
  width: 100%;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.scroll-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  animation: scroll 10s linear infinite;
}
.scroll-text p {
  margin: 0;
  padding: 0;
}

3、定義動畫關鍵幀：

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

在這個示例中，我們創(chuàng)建了一個名為scroll的動畫，它會在10秒的時間內將文本從右到左滾動。@keyframes定義了一個動畫的關鍵幀，其中transform: translateX(100%)表示文本在動畫開始時位于容器的右側，而transform: translateX(-100%)則表示文本在動畫結束時位于容器的左側，這樣，文本就會依次顯示出來。