CSS文字滾動的使用及效果

一、CSS文字滾動代碼

CSS文字滾動是網頁設計中常用的效果之一。通過CSS的animation屬性可以輕鬆實現文字滾動效果。下面是該效果的CSS代碼實現：

.scroll {
  animation: scroll 10s linear infinite;
}

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

在上面的代碼中，我們將文字框定在一個類名為.scroll的樣式中，並使用animation屬性來定義文字滾動的持續時間、動畫速度和動畫效果。通過keyframes屬性，我們定義了文字滾動的動畫特效，其中0%的位置代表文字起始位置，100%的位置代表文字滾動到終止位置的位置。

二、CSS文字滾動左邊進去右邊出來

通過CSS可以輕鬆地實現文字從左邊進入，從右邊退出的效果。下面是該效果的CSS代碼實現：

.scroll {
  animation: scroll 10s linear infinite;
}

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

在上面的代碼中，我們同樣是將文字框定在類名為.scroll的樣式中，並通過animation屬性定義滾動的持續時間、動畫速度和動畫效果。不同的是，我們在keyframes屬性中將0%狀態的文字位置改為在左側外部，100%狀態的文字位置改為在右側外部。

三、CSS文字滾動顯示

通過將文字逐字逐句滾動顯示，可以增強網頁的視覺效果。下面是該效果的CSS代碼實現：

.scroll {
  animation: scroll 5s steps(8) infinite;
}

@keyframes scroll {
  0% { width: 0; }
  100% { width: 100%; }
}

在上面的代碼中，我們同樣是將文字框定在類名為.scroll的樣式中，並通過animation屬性定義滾動的持續時間、動畫速度和動畫效果。不同的是，我們在keyframes屬性中將動畫分為了8個步驟，即逐個字符展示。在0%狀態中，我們將文字寬度設置為0，而在100%狀態中，我們將文字寬度設置為100%。

四、CSS文字滾動播放

除了滾動顯示，我們還可以利用CSS實現文字滾動播放的效果。下面是該效果的CSS代碼實現：

.scroll {
  animation: scroll 10s steps(5) infinite;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes scroll {
  0% { width: 0; }
  100% { width: 100%; }
}

在上面的代碼中，我們同樣是將文字框定在類名為.scroll的樣式中。通過animation屬性定義滾動的持續時間、動畫速度和動畫效果。由於播放的文字需要連續播放，因此我們使用white-space屬性將文字顯示在同一行，而使用overflow屬性將文字溢出隱藏。在keyframes屬性中將動畫同樣分為了5個步驟，即逐個字符播放。在0%狀態中，我們將文字寬度設置為0，而在100%狀態中，我們將文字寬度設置為100%。

五、CSS文字滾動效果

通過給文字添加上下移動或仿3D旋轉的效果，可以增加網頁的美感和視覺效果。下面是該效果的CSS代碼實現：

.scroll {
  animation: slide 10s infinite;
  transform-style: preserve-3d;
}

@keyframes slide {
  0% { transform: translateY(0) rotateX(0); }
  50% { transform: translateY(-100%) rotateX(270deg); }
  100% { transform: translateY(-200%) rotateX(0); }
} 

在上面的代碼中，我們同樣是將文字框定在類名為.scroll的樣式中。通過animation屬性定義滾動的持續時間、動畫速度和動畫效果。除此之外，我們使用transform-style屬性設置元素的3D轉換狀態。在keyframes屬性中，我們將動畫分為了三個步驟。在0%狀態中，文字位於正常位置，沒有任何旋轉。隨着動畫進行，文字將在Y軸上逐漸向上移動，同時在X軸上逐漸向內旋轉。到達50%位置時，文字已經完全翻轉到背面。直到100%的位置時，文字回到了正常位置，同時完成了一次360度的旋轉。

六、CSS文字滾動隨機選題特效

除了以上幾種效果，我們還可以利用隨機選題特效來滾動文字，增加網頁的趣味性。下面是該效果的CSS代碼實現：

.scroll {
  animation: scroll var(--d) linear infinite;
  --d: calc(1s + var(--t) * 0.1s);
  transform: translateY(-100%);
  white-space: nowrap;
}

@keyframes scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

在上面的代碼中，我們同樣是將文字框定在類名為.scroll的樣式中。通過animation屬性定義滾動的持續時間、動畫速度和動畫效果。我們使用–d變量控制動畫速度，其中–t代表隨機數，每次動畫開始時，都會生成一個新的隨機數，從而實現隨機選題的效果。在translateY屬性中，我們將文字置於屏幕頂部。

七、CSS文字滾動上下

如果縱向滾動文字更符合你的需求，那麼可以嘗試使用CSS實現文字上下滾動的效果。下面是該效果的CSS代碼實現：

.scroll {
  animation: slide 10s linear infinite;
}

@keyframes slide {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

在上面的代碼中，我們同樣是將文字框定在類名為.scroll的樣式中。通過animation屬性定義滾動的持續時間、動畫速度和動畫效果。在keyframes屬性中，我們設置動畫從0%到100%時，元素的位置從頂部向下移動100%。

八、CSS文字滾動向左

除了從右往左滾動文字，我們同樣可以輕鬆地在CSS中實現從左往右滾動文字的效果。下面是該效果的CSS代碼實現：

.scroll {
  animation: slide 10s linear infinite;
}

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

在上面的代碼中，我們同樣是將文字框定在類名為.scroll的樣式中。通過animation屬性定義滾動的持續時間、動畫速度和動畫效果。在keyframes屬性中，我們設置動畫從0%到100%的過程中，元素向左移動100%。