當(dāng)使用css動畫字幕時，我的html被切斷。

.marquee {
    position: fixed;
    width: 100%;
    padding-top: 1px;
    overflow: visible;
    white-space: nowrap;
    background-color: #000000;
    animation: slide 10s linear infinite;
}

@keyframes slide {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

<div class="marquee">
    Use code SUMMER50 for a $50 discount on orders over $300!
</div>

嘗試用vw(視口寬度)單位替換轉(zhuǎn)換函數(shù)中的百分比值。

這是因為100%的translate是使用元素大小計算的。所以在你的站點中，100%的元素寬度并不是屏幕的寬度，大約是600px，所以translateX很可能翻譯600px左右。

無論如何，我不建議使用字幕功能，因為它有非常糟糕的UX:它會分散用戶的注意力，并且很難閱讀不斷移動的文本。

.marquee {
  position: fixed;
  width: 100%;
  padding-top: 1px;
  overflow: visible;
  white-space: nowrap;
  background-color: #000000;
  animation: slide 10s linear infinite;
  color: white;
  text-align: center; /** better with this */
}


/** here is the change */
@keyframes slide {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100vw); }
}

<div class="marquee">
  Use code SUMMER50 for a $50 discount on orders over $300!
</div>