如何扩展CSS文字滑块内容至7个？动画无变化问题求助

问题说明 #

原文字滑块在包含3个内容项时可正常运行，但扩展至7个内容项后失效。实际需求为：页面居中显示一个div，布局为「自定义文本 + 左对齐文字滑块 + 自定义文本2」，滑块支持7个及以上内容项，不需要背景样式。

原可正常运行代码 #

CSS #

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:12px;
  color:#999;
  margin-top:200px;
}

HTML #

<div id=container>
  Make 
  <div id=flip>
    <div><div>wOrK</div></div>
    <div><div>lifeStyle</div></div>
    <div><div>Everything</div></div>
  </div>
  AweSoMe!
</div>

<p>a css3 animation demo</p>

扩展7个内容项后失效的代码 #

CSS #

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:12px;
  color:#999;
  margin-top:200px;
}

HTML #

<div id=container>
  Make 
  <div id=flip>
    <div><div>wOrK</div></div>
    <div><div>lifeStyle</div></div>
    <div><div>Everything</div></div>
    <div><div>wOrK2</div></div>
    <div><div>lifeStyle2</div></div>
    <div><div>Everything2</div></div>
    <div><div>wOrK3</div></div>
  </div>
  AweSoMe!
</div>

解决方案 #

核心修改点 #

1. 布局调整：使用flex布局实现页面居中及横向排列需求，滑块设置左对齐。
2. 动画关键帧重写：针对7个内容项重新计算margin-top值和动画时间占比，每个项高度为90px（45px内容高度+45px底部外边距），总动画时长设为14秒，每个项分配约1.9秒展示时间、0.1秒切换时间。
3. 移除背景样式：删除所有背景色相关CSS规则，保留文字样式。

修改后的完整代码 #

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin: 0;
  font-family: 'Roboto';
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#container {
  color: #999;
  text-transform: uppercase;
  font-size: 36px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

#flip {
  height: 50px;
  overflow: hidden;
  text-align: left;
}

#flip > div > div {
  color: #333;
  padding: 4px 12px;
  height: 45px;
  margin-bottom: 45px;
  display: inline-block;
}

#flip div:first-child {
  animation: show 14s linear infinite;
}

@keyframes show {
  /* 初始位置：显示第7个项 */
  0% { margin-top: -630px; }
  /* 切换到第6个项 */
  1% { margin-top: -540px; }
  /* 停留展示第6个项 */
  14.28% { margin-top: -540px; }
  /* 切换到第5个项 */
  15.28% { margin-top: -450px; }
  /* 停留展示第5个项 */
  28.56% { margin-top: -450px; }
  /* 切换到第4个项 */
  29.56% { margin-top: -360px; }
  /* 停留展示第4个项 */
  42.84% { margin-top: -360px; }
  /* 切换到第3个项 */
  43.84% { margin-top: -270px; }
  /* 停留展示第3个项 */
  57.12% { margin-top: -270px; }
  /* 切换到第2个项 */
  58.12% { margin-top: -180px; }
  /* 停留展示第2个项 */
  71.4% { margin-top: -180px; }
  /* 切换到第1个项 */
  72.4% { margin-top: -90px; }
  /* 停留展示第1个项 */
  99.99% { margin-top: -90px; }
  /* 回到初始位置，循环 */
  100% { margin-top: -630px; }
}

HTML

<div id="container">
  自定义文本
  <div id="flip">
    <div><div>wOrK</div></div>
    <div><div>lifeStyle</div></div>
    <div><div>Everything</div></div>
    <div><div>wOrK2</div></div>
    <div><div>lifeStyle2</div></div>
    <div><div>Everything2</div></div>
    <div><div>wOrK3</div></div>
  </div>
  自定义文本2
</div>

说明 #

• 动画时长可按需调整，修改animation: show 14s linear infinite;中的14s即可改变切换速度。
• 若需添加更多内容项，只需在HTML中新增对应的<div><div>内容</div></div>，并按相同规则扩展@keyframes show中的关键帧（每个新增项对应一组切换+停留的关键帧，调整百分比和margin-top值）。

内容的提问来源于stack exchange，提问作者Phil