Question

我有以下内容，可以为消息添加动画效果。问题在于#AdvertBox的宽度。如果我没有设置宽度，它会扩展到页面的100％。如果我设置任意宽度并且它太小，则第二条消息占用两行。我应该将它设置为什么，以便它始终与第二条消息一样宽，可能只有少量填充？

#AdvertBox {
  height: 55px;
  overflow: hidden;
  position: relative;
  background: black;
  color: white;
  border: 1.75px solid yellow;
  font-size: 35px;
  font-style: italic;
  border-radius: 1px;
  width: 45vw;
}

.scroll-left p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 55px;
  text-align: center;
  /* Starting position */
  transform: translateX(100%);
  /* Apply animation to this element */
  animation: scroll-left 10s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  25% {
    opacity: 1;
    transform: translateX(0%);
  }
  39% {
    opacity: 0;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(0%);
  }
}

.popIn p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 55px;
  text-align: center;
  /* Starting position */
  transform: translateY(-100%);
  /* Apply animation to this element */
  animation: popIn 10s linear infinite;
}

@keyframes popIn {
  /* Move it left */
  0% {
    transform: translateY(-100%);
  }
  /* Stop It */
  30% {
    transform: translateY(-100%);
  }
  /* fade out */
  42% {
    transform: translateX(0%);
  }
  /* fade out */
  70% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div id="AdvertBox">
  <div class="scroll-left">
    <p style="position: absolute; z-index: 1 ">
      First Message
    </p>
  </div>
  <div class="popIn">
    <p style="position: absolute; z-index: 2 ">
      Second, longer message to drop down
    </p>
  </div>
</div>

Answer 1

您可以将white-space: nowrap;添加到.popIn p样式，以防止文字被包装。

我还建议从width: 100%;中删除.popIn p，以便您的滚动动画尽早结束。在width: 100%;设置<p>后，它将继承父级的宽度，这将比<p>的溢出文本更短，从而使动画提前结束。

您可能还希望对其他动画<p>

进行相同的样式更新

请参阅此fiddle了解演示

确保div适合p到一行

1 个答案: