html文字行上下滚动

您可以使用HTML和CSS来实现文字的上下滚动。以下是一个简单的示例：

HTML代码：

<div class="scrolling-text">
  <p>This text will scroll up and down.</p>
</div>

CSS代码：

.scrolling-text {
  height: 100px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏超出容器高度的内容 */
}

.scrolling-text p {
  margin: 0; /* 去除段落的margin */
  line-height: 1.2; /* 设置行高，让文字垂直居中 */
  animation: scroll 10s infinite alternate; /* 定义动画 */
}

@keyframes scroll {
  from {
    transform: translateY(0); /* 初始状态 */
  }
  to {
    transform: translateY(-50%); /* 最终状态 */
  }
}

解释：

- `height: 100px` 设置容器高度为100像素。
- `overflow: hidden` 隐藏超出容器高度的内容。
- `margin: 0` 去除段落的margin，让文字紧贴容器顶部。
- `line-height: 1.2` 设置行高为1.2倍，让文字垂直居中。
- `animation: scroll 10s infinite alternate` 定义一个名为`scroll`的动画，持续时间为10秒，无限循环，并且在每次循环中来回交替播放。`scroll`是自定义的动画名称，可以任意命名。
- `@keyframes scroll` 定义`scroll`动画的关键帧。
- `from { transform: translateY(0); }` 初始状态，文字不偏移。
- `to { transform: translateY(-50%); }` 最终状态，文字向上偏移50%的高度。

您可以根据自己的需要修改容器高度、动画持续时间等参数。同时，您也可以使用JavaScript来控制滚动速度和方向等更多细节。