当前位置：首页 > 行业动态 > 正文

html文字往上轮播

admin
行业动态
2025-04-30
4

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

实现原理

通过CSS动画配合JavaScript动态调整内容位置,模拟文字向上滚动的效果，核心思路是当第一条内容完全滚出容器后，将其移动到容器底部，形成循环效果。

html文字往上轮播第1张

单元表格：关键代码结构

模块	代码示例	功能说明
HTML结构	`<div class="scroll-container">...</div>`	定义滚动容器
CSS样式	`.scroll-container { height: 50px; overflow: hidden; }`	固定容器高度并隐藏溢出内容
CSS动画	`@keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); }`	定义向上滚动的位移动画
JS逻辑	`setInterval(() => { container.appendChild(container.firstElementChild); }, 3000);`	定时将首元素移动到末尾实现循环

完整实现代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">文字向上轮播</title>
  <style>
    .scroll-container {
      height: 50px;
      overflow: hidden;
      line-height: 50px;
      border: 1px solid #ccc;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .scroll-item {
      padding: 5px 0;
    }
    @keyframes scrollUp {
      0% { transform: translateY(0); }
      100% { transform: translateY(-100%); }
    }
    .animate {
      animation: scrollUp 10s linear infinite;
    }
  </style>
</head>
<body>
  <div class="scroll-container" id="scrollBox">
    <div class="scroll-item">第一条公告内容</div>
    <div class="scroll-item">第二条公告内容</div>
    <div class="scroll-item">第三条公告内容</div>
  </div>
  <script>
    const container = document.getElementById('scrollBox');
    setInterval(() => {
      const first = container.firstElementChild;
      container.removeChild(first);
      container.appendChild(first);
    }, 3000); // 每3秒切换一次
  </script>
</body>
</html>