实现跑马灯的代码

以下是一个简单的跑马灯代码实现：

HTML：

<div id="marquee">
  <p>这是第一行文字</p>
  <p>这是第二行文字</p>
  <p>这是第三行文字</p>
  <p>这是第四行文字</p>
</div>

CSS：

#marquee {
  position: relative;
  width: 300px;
  height: 100px;
  overflow: hidden;
}

#marquee p {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% { transform: translateY(0); }
  100% { transform: translateY(-400%); }
}

JavaScript：

// 可选：获取跑马灯元素的高度
const marqueeHeight = document.getElementById('marquee').offsetHeight;

// 可选：设置跑马灯元素高度为0，以便在动画结束后隐藏元素
document.getElementById('marquee').style.height = '0';

这个代码使用CSS的动画功能来实现跑马灯效果。通过将每个段落元素绝对定位并使用transform: translateY()属性来控制它们的位置，我们可以创建一个无限循环的动画，使它们像跑马灯一样滚动。我们还可以使用JavaScript来获取和设置跑马灯元素的高度，以便在动画结束后隐藏它