自动换行垂直滑动文本动画

<div class="slider-container">
  <div class="slider-content">
    <p>这是一段需要滑动的文本内容。这是一段需要滑动的文本内容。这是一段需要滑动的文本内容。</p>
    <p>这是另一段需要滑动的文本内容。这是另一段需要滑动的文本内容。这是另一段需要滑动的文本内容。</p>
  </div>
</div>

.slider-container {
  overflow: hidden; /* 设置容器溢出隐藏，限制显示区域 */
  height: 200px; /* 设置容器高度，根据需要调整 */
}

.slider-content {
  animation: slide-up 10s linear infinite; /* 设置动画效果，10秒完成一次循环滑动 */
}

@keyframes slide-up {
  0% {
    transform: translateY(0); /* 初始位置，不做位移 */
  }
  100% {
    transform: translateY(-100%); /* 终点位置，向上滑动100%的高度 */
  }
}

// 获取滑动容器和内容元素
var container = document.querySelector('.slider-container');
var content = document.querySelector('.slider-content');

// 监听鼠标悬停事件，停止滑动
container.addEventListener('mouseover', function() {
  content.style.animationPlayState = 'paused';
});

// 监听鼠标离开事件，继续滑动
container.addEventListener('mouseout', function() {
  content.style.animationPlayState = 'running';
});