Question

我以前曾使用marquee元素作为我的即时新闻，但由于此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>

Answer 2

所有span标签都考虑为一个。在.flashnews_today span中，向display添加一个css block属性。它将正常工作。

.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;
  display:block;
}

.flashnews_today span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes flashnews_today {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>

如何使用CSS制作字幕样式

2 个答案: