我之前使用marquee元素作为我的flash新闻，但由于它基于此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>您的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>所有span标签都在考虑作为单一标签。在.flashnews_today span中添加css display属性到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>