如何使用 CSS3 動畫創造響應式跑馬燈效果？

如何使用 CSS3 動畫建立響應式選取框效果？

CSS3 動畫提供了一種為網站元素添加動感的強大方法。最常見的應用程式之一是字幕效果，其中文字在螢幕上滾動。然而，創建適應任意長度文字的選取框效果可能具有挑戰性。

之前的嘗試

創建選取框效果的傳統方法通常依賴固定值，例如 margin-left:-4200px； 。雖然這適用於特定的文字大小，但當文字長度變化時，就會出現問題。

調整方法

利用稍微修改過的標記，並在段落中嵌套跨度，可以讓響應式解決方案。這是更新的方法：

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;

  padding-left: 100%;
  will-change: transform;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

在此方法中，跨度的寬度設定為“最大內容”，確保其調整為文字的長度。 padding-left 用於將文字移出可見區域，動畫將文字翻譯回視圖中，從而建立選取框效果。

尊重使用者首選項

出於可訪問性問題，程式碼尊重使用者關於運動的偏好。如果使用者喜歡減少運動，則停用動畫。

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01s;
    width: auto;
    padding-left: 0;
  }
}

透過結合這些技術，您可以建立適應任意數量文字的響應式選取框效果，從而增強設計靈活性和可訪問性。

以上是如何使用 CSS3 動畫創造響應式跑馬燈效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！