我有一些簡單的滾動（選框）文本......

https://jsfiddle.net/kcbf0hsw/

我想知道為什么無論我為“持續時間”使用什么值，文本總是在“完成滾動”之前消失？

我一直以為

-webkit-animation-duration: 20.0s;

將自動設定速度，使影片在 20 秒內完成。那是錯的嗎？

我已經嘗試了許多存在的字幕庫。理想情況下，我正在尋找可以處理各種長度的動態變化文本的東西。

uj5u.com熱心網友回復：

用 css 和 javascript 選框

我注意到問題在于您為文本指定了固定寬度。

#Headlines{
    position: absolute;
    top: 5px;
    height: 30px;
    white-space: nowrap;
    /*width:622px; This causes the problem*/
    z-index:0;
    font-weight: bold;
    color:white;
    text-shadow: 3px 3px 3px #000000;
    font-size: 24px;
-webkit-animation-name: scroll;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 20.0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: linear;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial';
    height:768px;
    background-color:grey;
  width: 1024px;
    font-weight: bold;
}

#Headlines_bg{
    position: absolute;
    top:0px;
    left:0px;
    width: 622px;
    height: 40px;
    background:#FFFFFF;
    opacity:.3;
    z-index:-1;
    border: 1px solid rgba(0,0,0,1);
}

#Headlines_Container{
    position: absolute;
    top:0px;
    left:0px;
    width:622px;
    height: 40px;
    z-index:0;
    overflow:hidden;
}

#Headlines{
    position: absolute;
    top: 5px;
    height: 30px;
    white-space: nowrap;
    /*width:622px;*/
    z-index:0;
    font-weight: bold;
    color:white;
    text-shadow: 3px 3px 3px #000000;
    font-size: 24px;
  /*-webkit-transform:translateX(30%);*/
-webkit-animation-name: scroll;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 20.0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes scroll {
0% {-webkit-transform:translateX(38%);}
100% {-webkit-transform:translateX(-100%);}}

<div id="Headlines_bg"></div>
<div id="Headlines_Container">
<div id="Headlines">Pressure builds as COVID hospitalizations hit record highs in Ontario and New Brunswick   Hamilton neighbourhood covered after plant malfunction sends 'beans raining down</div>
</div>

更新

實作選取框效果的一種更可控的方法是使用 javascript。觀察以下代碼是回應式的。

function markesina() {
        b = document.getElementById("m");
        //console.log(b.offsetWidth);
        console.log(b.scrollWidth, b.offsetWidth);
        b.animate(
          [
            // keyframes
            { transform: `translateX(${b.offsetWidth}px)` },
            { transform: `translateX(-${b.scrollWidth}px)` },
          ],
          {
            // timing options
            duration: 20000,
            iterations: Infinity,
          }
        );
      }

      markesina();

      window.addEventListener("resize", markesina);

.marke {
        white-space: nowrap;
      }

<link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />


<div class="container">
      <div class="row justify-content-center">
        <div class="col-6 mt-5" style="overflow: hidden">
          <p id="m" class="marke">
            Pressure builds as COVID hospitalizations hit record highs
            in Ontario and New Brunswick   Hamilton neighbourhood covered
            after plant malfunction sends 'beans raining down  
          </p>
        </div>
      </div>
    </div>

uj5u.com熱心網友回復：

修改這一行

100% {
  -webkit-transform: translateX(-100%);
}

到

100% {
  -webkit-transform: translateX(-350%);
}

使左邊的字跡完全消失

uj5u.com熱心網友回復：

試試這個它可能會作業并在完成后停止顯示文本

animation-fill-mode: forwards; animation-iteration-count: 1;

標籤：

上一篇：如何將值從后端傳遞到React前端并在CSS中將該值用于前端？

下一篇：使用react-bootstrap組件對表格中的單元格進行樣式設定