Vue 實現跑馬燈/文字滾動效果

在Vue 中實現跑馬燈/文字滾動效果，可以使用CSS 動畫或第三方庫。本文介紹了使用CSS 動畫的方法：創建滾動文本，用

包裹文本。定義CSS 動畫，設置overflow: hidden、width 和animation。定義關鍵幀，設置動畫開始和結束時的transform: translateX()。調整動畫屬性，如持續時間、滾動速度和方向。

Vue 實現跑馬燈/文字滾動效果

如何實現？

在Vue 中實現跑馬燈/文字滾動效果，可以使用CSS 動畫或第三方庫。本文將介紹使用CSS 動畫的方法。

步驟詳解：

1. 創建滾動文本：在Vue 模板中，包裹需要滾動的文本，例如： <div class="marquee"><p>{{ text }}</p></div> 。
2. 定義CSS 動畫：在<style></style>標記內，定義CSS 動畫，例如：

 <code class="css">.marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }</code>

• overflow: hidden隱藏超出容器部分的文本。
• width: 100%設置容器寬度與文本寬度相等。
• animation定義了動畫名稱、持續時間、重複次數和播放模式。
• @keyframes定義了動畫關鍵幀， 0%表示動畫開始時， 100%表示動畫結束時。

3. 調整動畫屬性：根據需要調整動畫屬性，例如持續時間、滾動速度或方向。

示例：

 <code class="vue"><template> <div class="marquee"><p>{{ text }}</p></div> </template> <script> export default { data() { return { text: &#39;这是一条跑马灯&#39; }; } }; </script> <style> .marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style></code>

注意：

• 滾動速度可以通過調整動畫持續時間來控制。
• 滾動方向可以通過改變transform: translateX()中的值的符號來控制，例如transform: translateX(100%)將文本向右滾動。
• 滾動距離可以通過調整容器寬度來控制，使容器寬度小於文本寬度。

以上是Vue 實現跑馬燈/文字滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！