javascript - CSS 跑马灯速度

Question

使用 CSS 实现跑马灯效果，代码运行完美。我唯一的问题是速度。

当文本很短时，选取框会花费更长的时间。当文本很长时，选取框运行得非常快。我知道上面是因为动画时间 animation: marquee 15s linear infinite;

有没有办法无论文本长度如何都以一致的速度运行选取框？如果需要，我愿意使用 Javascript(我尝试过但没有成功。)

这是我当前的 CSS 代码:

<style>
    /* Make it a marquee */
    .marquee {
        width: 100%;
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        background-color: #000000;
        bottom: 0px;
        color: white;
    }
    .marquee span {
        display: inline-block;
        padding-left: 100%;
        text-indent: 0;
        animation: marquee 15s linear infinite;
        animation-delay: 10s;
        background-color: #000000;
        color: white;
        bottom: 0px;
    }
    /* Make it move */

    @keyframes marquee {
        0% {
            transform: translate(10%, 0);
        }
        100% {
            transform: translate(-100%, 0);
        }
    }
    /* Make it pretty */

    .scroll {
        padding-left: 1.5em;
        position: fixed;
        font: 50px 'Verdana';
        bottom: 0px;
        color: white;
        left: 0px;
        height: 10%;
    }
</style>

HTML

<div class="marquee">
<p class="scroll marquee"><span id="scrolltext"></span></p>
</div>

Answer 1

没错，这更像是一道数学题。

我们可以像这样进行简单的Time = Distance/Speed计算

function calcSpeed(speed) {
  // Time = Distance/Speed
  var spanSelector = document.querySelector('.marquee span');
  var spanLength = spanSelector.offsetWidth;
  var timeTaken = spanLength / speed;
  spanSelector.style.animationDuration = timeTaken + "s";
}
calcSpeed(100);

function calcFastSpeed(speed) {
  // Time = Distance/Speed
  var spanSelector = document.querySelector('.fast.marquee span');
  var spanLength = spanSelector.offsetWidth;
  var timeTaken = spanLength / speed;
  spanSelector.style.animationDuration = timeTaken + "s";
}
calcFastSpeed(500);

/* Make it a marquee */

.marquee {
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  background-color: #000000;
  bottom: 0px;
  color: white;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee linear infinite;
  animation-delay: 5s;
  background-color: #000000;
  color: white;
  bottom: 0px;
}
/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(10%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
/* Make it pretty */

.scroll {
  padding-left: 1.5em;
  position: fixed;
  font: 50px'Verdana';
  bottom: 0px;
  color: white;
  left: 0px;
  height: 10%;
}

<div class="marquee">
  <span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<br />
<div class="fast marquee">
  <span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span>
</div>

当然，这是一个简单的示例，没有考虑“轨道”的长度，但现在您了解了基础知识，我相信您可以解决它:-)

这是另一个例子，2 个不同长度的文本以相同的速度传输

function calcSpeed(speed) {
  // Time = Distance/Speed
  var spanSelector = document.querySelectorAll('.marquee span'),
    i;
  for (i = 0; i < spanSelector.length; i++) {
    var spanLength = spanSelector[i].offsetWidth,
      timeTaken = spanLength / speed;
    spanSelector[i].style.animationDuration = timeTaken + "s";
  }
}
calcSpeed(100);

/* Make it a marquee */

.marquee {
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  background-color: #000000;
  bottom: 0px;
  color: white;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee linear infinite;
  animation-delay: 5s;
  background-color: #000000;
  color: white;
  bottom: 0px;
}
/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(10%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
/* Make it pretty */

.scroll {
  padding-left: 1.5em;
  position: fixed;
  font: 50px'Verdana';
  bottom: 0px;
  color: white;
  left: 0px;
  height: 10%;
}

<div class="marquee">
  <span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<br />
<div class="marquee">
  <span>Well I hope it goes off the screen</span>
</div>