html - 如何使用CSS制作跑马灯样式

Question

我之前在我的快讯中使用了跑马灯元素，但因为它已被弃用，基于此 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee 我尝试改用 CSS。但是我遇到了一个问题，只显示了第一个 span 元素，而没有显示我的 span 元素的其余部分。

.flashnews_today {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*box-sizing: border-box;*/
  /*border: 1px green solid;*/
}

.flashnews_today span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  /*border: 1px red solid;*/
  -webkit-animation: flashnews_today 45s linear infinite;
  animation: flashnews_today 45s linear infinite;
}

.flashnews_today span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes flashnews_today {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

<div class="flashnews_today">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span><span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user.</span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
</div>

Answer 1

您的 CSS 引用了所有 span 标签，并试图在同一位置为它们设置动画。因此，只有第一个显示，同时防止其他显示。如果您在每个跨度之后使用 br 标签，您将看到您的其他跨度现在变得可见。

.flashnews_today {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*box-sizing: border-box;*/
  /*border: 1px green solid;*/
}

.flashnews_today span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  /*border: 1px red solid;*/
  -webkit-animation: flashnews_today 45s linear infinite;
  animation: flashnews_today 45s linear infinite;
}

.flashnews_today span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes flashnews_today {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

<div class="flashnews_today">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
  <br/>
  <span>Hello, I am a StackOverflow user.</span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
</div>