在Web开发中，跑马灯效果是一种非常常见的动画效果，可以使文本或图像以水平或垂直方向滚动显示。本文将介绍如何使用CSS实现跑马灯效果，并通过添加一些额外的样式来美化标题。

实现横向跑马灯效果

我们首先来实现一个横向跑马灯效果。首先，我们需要一个容器元素来包裹我们的内容。我们将使用一个无序列表（ul）来放置我们的文本。

<div class="marquee">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Nullam et ullamcorper ex. Nunc eu arcu euismod, ultrices risus ac, posuere nibh.</li>
  </ul>
</div>

接下来，我们需要定义CSS样式来实现跑马灯效果。我们将使用关键帧动画（@keyframes）和动画（animation）属性来实现滚动效果。

<style>
.marquee {
  overflow: hidden;
}

ul {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 10s linear infinite;  /* 更改10s以控制滚动速度 */
}

li {
  display: inline-block;
  padding: 0 1rem;
}

@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

在上述代码中，我们使用了overflow: hidden;来隐藏容器元素之外的内容。我们通过将无序列表（ul）的display属性设置为inline-block来使文本水平排列，并将white-space属性设置为nowrap来防止文本换行。动画属性animation: marquee 10s linear infinite;将我们定义的关键帧动画应用于无序列表。在关键帧动画marquee中，我们使用transform: translateX()来控制文本滚动的方向和位置。

美化标题样式

为了美化标题样式，我们可以添加一些额外的样式来增强显示效果。我们可以通过调整字体、颜色和背景等属性来实现。

<style>
h1 {
  font-family: Arial, sans-serif;
  font-size: 2rem;
  color: #333;
  background-color: #f5f5f5;
  padding: 1rem;
  text-align: center;
}
</style>

在上述代码中，我们使用了font-family属性来设置标题的字体，font-size属性来设置标题的字号，color属性来设置标题的颜色，background-color属性来设置标题的背景颜色，padding属性来设置标题的内边距，text-align属性来设置标题的文本对齐方式。

结语

通过使用CSS的关键帧动画和动画属性，我们可以轻松实现跑马灯效果。通过调整样式属性，我们还可以进一步美化效果。希望本文对你实现跑马灯效果以及美化标题样式有所帮助！

本文来自极简博客，作者：深海鱼人，转载请注明原文链接：使用CSS实现跑马灯效果