如何在沒有硬編碼值的情況下建立響應式 CSS3 選取框效果？

CSS3 中的選取框效果：避免文字適應的特定值

在CSS3 動畫中，通常需要建立選取框效果，其中文字滾動穿過螢幕。但是，使用特定值，例如「margin-left: -4200px;」文字縮排可能會限制不同的文字長度。

避免此問題的一種方法是將文字包裝在span 元素中並使用「padding-left」屬性：

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%; /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

這允許動畫適應文字的寬度，確保它在螢幕上完全滾動。此外，當使用者將滑鼠懸停在文字上時，“懸停”狀態可用於暫停動畫：

.marquee span:hover {
  animation-play-state: paused;
}

最後，為了尊重使用者偏好，此程式碼實現了“prefers-reduced-motion”媒體查詢，這會降低動畫速度或為可能喜歡較少移動的用戶完全停用它。

以上是如何在沒有硬編碼值的情況下建立響應式 CSS3 選取框效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！