Question

使用CSS作为选框效果，代码运行完美。我唯一的问题是速度。

当文字很短时，选框会花费更长时间。当文本很长时，选框运行得非常快。我知道上面是因为动画时间var_dump(dns_get_record($host, DNS_A + DNS_AAAA));

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

这是我目前的CSS代码：

animation: marquee 15s linear infinite;

HTML

<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>

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>

Answer 2

嗨，这是您尝试做的示例Example

以及更多，如果您可以提供正确的HTML代码详细信息

body { margin: 20px; }

.marquee {
  height: 25px;
  width: 420px;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

<div class="marquee">
  <div>
    <span>You spin me right round, baby. Like a record, baby.</span>
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
</div>

Hii看起来它与

正常工作

 @keyframes marquee {
        0% {
            transform: translate(10%, 0);
        }
        100% {
            transform: translate(-100%, 0);
        }
   }

-------- i used belowed one that works fine for me ----------
------------------ you can try thisss---------------------

@keyframes marquee {
        0% {
            transform: translate(0%, 0);
        }
        100% {
            transform: translate(-100%, 0);
        }
   }

Answer 3

您可以为滑动元素提供相同的宽度，然后它们应以相同的速度滚动。但这不是真正的动态。

或者您可以根据元素的宽度计算速度。看我的小演示。

// your time for 10 px in seconds
var timeFor10Px = 0.2;
var animationSettings = 'marquee linear infinite';
var $marque = $('.marque');

$marque.each( function() {
  var outerWidth = $(this).outerWidth();
  var calc = outerWidth / 10 * timeFor10Px;
  $(this).css('animation', animationSettings + ' ' + calc + 's');
});

.holder {
  background: black;
  width: 100%;
  color: white;
}

.marque {
  /* removed, see js tab */
  /*animation: marquee 15s linear infinite; */
  display: inline-block;
}



@keyframes marquee {
  from {
    transform: translate( 0%);
  }
  to {
    transform: translate( 100%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <span class="marque marqu1">
  Some nice Text
  </span>
  <br>
  <span class="marque marqu2">
  Some nice Text Lorem Ipsum dolor sit amet.....
  </span>
</div>

编辑：@Andrew Bones有点快，使用类似的解决方案

CSS Marquee速度

3 个答案: