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中文網其他相關文章！
