CSS Moving Text in HTML

一、什麼是CSS Moving Text

CSS Moving Text是指在HTML文檔中，使用CSS動畫將文本進行移動的效果。移動的方向可以是從左到右、從右到左、從上到下、從下到上等。這種效果可以很好地吸引用戶的注意力，為網頁設計增加趣味性。

要實現CSS Moving Text，我們可以使用關鍵幀動畫（@keyframes）來定義動畫效果，調整動畫的關鍵幀（from、to或百分比），以及調整動畫的持續時間、延遲等參數。

下面我們就來看看如何使用CSS Moving Text來實現一些有趣的效果。

二、從左到右移動的文本效果

首先，我們定義一個div元素，並將其中的文本設置為需要移動的文本，如下所示：

<div class="moving-text">This text moves from left to right</div>

接着，在CSS中定義動畫效果：

<style>
.moving-text {
  animation-name: move-left-to-right;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

@keyframes move-left-to-right {
  from {left: -100px;}
  to {left: 100%;}
}
</style>

在上面的代碼中，我們定義了一個名為move-left-to-right的動畫，用於控制文本的移動效果。在div元素的樣式中，我們將animation-name設置為move-left-to-right，表明使用該動畫，將文本從左到右進行移動。

animation-duration用於設置動畫的持續時間，單位為秒（s）或毫秒（ms），這裡設置為3s。

animation-timing-function用於設置動畫的時間函數，即動畫進行過程中的速度。這裡設置為線性加速度，即勻速運動。

animation-delay表示動畫開始前的延遲時間，這裡設置為1s。

animation-iteration-count表示動畫的循環次數，這裡設置為無限循環。

animation-direction表示動畫的播放方向，可以是normal（正向播放）、reverse（反向播放）或alternate（正向、反向輪流播放），這裡設置為normal。

animation-fill-mode表示動畫結束後元素的樣式設置。這裡設置為forwards，表示動畫結束後，元素將保持動畫最後一幀的狀態。

最後，在@keyframes中，我們定義了兩個關鍵幀：from表示動畫開始時，文本的left屬性值為-100px，即文本在視圖範圍之外，向左偏移100像素。to表示動畫結束時，文本的left屬性值為100%，即文本位於視圖範圍內，向右移動到視圖的右側邊緣處。

三、從上到下移動的文本效果

類似地，我們也可以定義從上到下移動的文本效果：

<div class="moving-text">This text moves from top to bottom</div>
<style>
.moving-text {
  animation-name: move-top-to-bottom;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: backwards;
}

@keyframes move-top-to-bottom {
  0% {top: -100px;}
  100% {top: 100%;}
}
</style>

可以看到，這裡的文本絕對定位在一個父元素（例如一個容器div）中，容器div則需要相對定位，以便子元素可以按照父元素的位置進行移動。

在該案例中，我們定義了名為move-top-to-bottom的動畫，使用top屬性控制文本的位置。關鍵幀設置為從0%向上移動100像素到視圖之外，到100%繼續移動到視圖的底部。

動畫的速度先緩慢再加速，畫面效果會流暢自然。

四、上下左右移動的文本效果

除此以外，我們也可以將文本進行複雜的移動效果，如上下左右同時移動，形成十字架的效果：

<div class="moving-text">This text moves in cross pattern</div>
<style>
.moving-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-name: move-cross;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

@keyframes move-cross {
  0% {
    top: 0%;
    left: 0%;
  }
  25% {
    top: 0%;
    left: 50%;
  }
  50% {
    top: 0%;
    left: 100%;
  }
  75% {
    top: 50%;
    left: 100%;
  }
  100% {
    top: 100%;
    left: 100%;
  }
}
</style>

在該案例中，文本通過transform屬性設置為相對於視口的50%偏移量定位，再通過關鍵幀動畫進行複雜的移動效果設置。

這裡使用了5個關鍵幀，將文本移動至視圖的四個角和中心點，形成十字架的效果。這裡未設置動畫的播放方向和樣式設置，因為該案例中文本只播放一次。

五、總結

CSS Moving Text可以為網頁設計增添趣味性和動感。我們可以通過關鍵幀動畫來靈活控制文本的動畫效果，產生想要的效果。在這裡展示的僅是CSS Moving Text的幾個簡單案例，在實踐中，我們還可以通過調整動畫參數和運用各種動畫屬性來創造出更為豐富的動畫效果。