在 CSS 个关键帧中一条一条滚动消息

Question

如何使用 CSS 关键帧或 js 逐条滚动消息我使用（ white-space 和 nowrap ）但不工作

.marquee-wrap {
  overflow: auto;
  margin: 0 auto;
  height: 80px;
  border: 1px solid #000;
  padding: 10px;
  font-size: 18px;
  line-height: 1.6;
}


/* increase duration to speed up scroll */

.marquee {
  animation: scrollUp 10s linear 1s infinite;
}

@supports (transform:translate3d(0px, 0px, 0px)) {
  .marquee-wrap {
    overflow: hidden;
  }
  .marquee {
    padding-top: 160px;
    white-space: nowrap;
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .marquee-wrap {
    overflow: hidden;
  }
  /* ie11 hack */
  .marquee {
    padding-top: 160px;
  }
}

@keyframes scrollUp {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

.marquee:hover {
  animation-play-state: paused
}

<div style="width: 100%; opacity: 0.5; background-color: rgb(255, 0, 0);color:white;">
  <div class="marquee-wrap">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" too="" style="float: right;">×</button>
    <div>
      <div class="marquee">
        <div>Rogue, inconspicuous motes of rock and gas descended from astronomers Sea of Tranquility billions upon billions
        </div><br>
        <div>Radio telescope cosmic ocean colonies consciousness, Hypatia! Culture. Prime number light years Hypatia.
        </div>

      </div>
    </div>
  </div>
</div>

我已经尝试了这个css代码的所有选项，但没有人能满足我的需要。

谢谢

Answer 1

您可以在 div 的底部添加等于选取框高度的填充 - 然后文本将在下一个出现之前消失：

.marquee-wrap {
  box-sizing:border-box;    /* add this so the marquee wrapper 80px height - if you want it to be 100px,just change this and the padding below */
  overflow: auto;
  margin: 0 auto;
  height: 80px;
  border: 1px solid #000;
  padding: 10px;
  font-size: 18px;
  line-height: 1.6;
}


/* increase duration to speed up scroll */

.marquee {
  animation: scrollUp 10s linear 1s infinite;
}

.marquee > div {
  padding-bottom:80px; /* height of mmarquee */
}
.marquee > div:last-child {
  padding-bottom:0;   /* reduces the time between animations */
}

@supports (transform:translate3d(0px, 0px, 0px)) {
  .marquee-wrap {
    overflow: hidden;
  }
  .marquee {
    padding-top: 160px;
  }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .marquee-wrap {
    overflow: hidden;
  }
  /* ie11 hack */
  .marquee {
    padding-top: 160px;
  }
}

@keyframes scrollUp {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

.marquee:hover {
  animation-play-state: paused
}

<div style="width: 100%; opacity: 0.5; background-color: rgb(255, 0, 0);color:white;">
  <div class="marquee-wrap">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" too="" style="float: right;">×</button>
    <div>
      <div class="marquee">
        <div>
            Rogue, inconspicuous motes of rock and gas descended from astronomers Sea of Tranquility billions upon billions
        </div>
        <div>
            Radio telescope cosmic ocean colonies consciousness, Hypatia! Culture. Prime number light years Hypatia.
        </div>
      </div>
    </div>
  </div>
</div>

在 CSS 个关键帧中一条一条滚动消息

Scrolling message one by one in CSS keyframes

html

css

marquee