HTML和CSS代码实现新闻滚动效果

涛哥
Html代码

以下代码实现了一个新闻滚动效果，将多条新闻以滚动的方式在页面上展示。具体实现方法是使用了 CSS 的动画和 transform 属性，通过设置 translateY 的值实现了列表上下移动的效果，从而实现了新闻的滚动。

整个新闻滚动效果的 HTML 结构是一个 div 容器，其中包含一个 ul 列表用于展示新闻。CSS 样式中设置了 .news 容器的高度、隐藏超出容器高度的内容、以及相对定位；设置了 .news-container 容器的绝对定位、宽度、以及动画效果；设置了 ul 列表的相对定位、动画效果、以及移除默认样式。

这个新闻滚动效果可以用于展示多条新闻的标题，用户可以通过点击标题来查看对应的新闻内容。也可以根据需要对其进行调整和定制，例如更改滚动速度、添加动画效果、更改样式等等。

以下是使用 HTML 和 CSS 实现新闻滚动效果的代码：

HTML 代码：

<div class="news">
  <div class="news-container">
    <ul>
      <li>这是第一条新闻</li>
      <li>这是第二条新闻</li>
      <li>这是第三条新闻</li>
      <li>这是第四条新闻</li>
      <li>这是第五条新闻</li>
    </ul>
  </div>
</div>

CSS 代码：

.news {
  height: 50px;
  overflow: hidden;
  position: relative;
}

.news-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: scroll 10s linear infinite;
}

li {
  line-height: 50px;
  font-size: 20px;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-250px);
  }
}

这个代码中，我们使用了 overflow: hidden 来隐藏超出容器高度的内容。容器的高度设定为50px，可以根据实际情况进行调整。position: relative 的 .news 容器是为了使 .news-container 容器使用 position: absolute 相对于它进行定位。

通过设置 .news-container 容器的 position: absolute 和 width: 100%，可以确保其宽度和位置始终与 .news 容器相同。

我们使用了 list-style: none 来删除列表的标志符号，同时设置了 padding: 0 和 margin: 0 来移除默认样式。

animation 属性定义了一个名为 scroll 的动画，并将其应用到列表上。在这个动画中，我们使用 transform: translateY(-250px) 将列表上移 250 像素，来实现新闻滚动的效果。设置 linear 以及较长的时间（10 秒）来使滚动效果平滑。

通过这种方式，列表会无限循环滚动，展示所有的新闻。可以通过添加和删除列表项来动态更新新闻内容。

推荐：html实现滚动字幕代码示例

 
  • 滚动字幕
  • 时间
  • 样式