自制无库滚动字幕遇问题：间距过大+动画失效求协助

问题1：角色与姓名间距过大（自动换行） #

h1、h3这类标题标签默认是块级元素，会独占一行，哪怕没手动换行，它们也会自动上下排列，导致间距过大。两种解决方式任选其一：

方式1：改为行内块元素 #

给h1和h3添加行内块属性，自定义间距：

h1, h3 {
  display: inline-block;
  margin: 0 10px; /* 调整角色与姓名的间距 */
}

方式2：用flex布局对齐 #

给每个字幕项容器添加flex布局，横向排列内部元素：

.credit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* 控制角色与姓名的间距 */
}

问题2：字幕滚动动画无效 #

动画不生效的核心原因是：top属性仅对非static定位的元素生效，你的.credit元素默认是position: static，所以top的动画变化不会被识别。同时要确保滚动容器高度足够，避免内容溢出异常。

完整修改后的CSS代码 #

html, body {
  background-color: black;
  margin: 0;
  padding: 0;
  height: 100%; /* 让根容器占满屏幕高度 */
  overflow: hidden; /* 隐藏超出屏幕的内容 */
}

@font-face {
  font-family: Pixelated;
  src: url(uni05_53.ttf);
}

h1 {
  font-family: Pixelated;
  color: white;
  display: inline-block;
  margin: 0 10px;
}

h3 {
  font-family: Pixelated;
  color: white;
  font-size: 25px;
  display: inline-block;
  margin: 0;
}

.credits {
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative; /* 作为绝对定位子元素的参考容器 */
  overflow: hidden;
}

.credit {
  position: absolute; /* 改为绝对定位，让top属性生效 */
  width: 100%;
  animation: creditRoll 15s linear infinite; /* infinite循环无需forwards */
}

@keyframes creditRoll {
  0% {
    top: 100%; /* 初始位置在屏幕底部外 */
    transform: translateY(0);
  }
  100% {
    top: 0;
    transform: translateY(-100%); /* 向上移动自身高度，确保完全移出屏幕 */
  }
}

关键修改说明 #

1. 给html和body设置height: 100%和overflow: hidden，确保滚动容器高度匹配屏幕，且隐藏溢出内容。
2. 给.credits添加position: relative，让.credit的绝对定位以它为参考基准。
3. 给.credit设置position: absolute和width: 100%，让top属性的动画生效，同时保证内容居中显示。
4. 动画中结合transform: translateY实现滚动，比单纯修改top更流畅，且能确保内容完全移出屏幕。

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