跑马灯

<div class="marquee-container">
  <p>This is a text that will scroll from right to left.</p>
</div>

然后，在CSS文件中添加以下代码：

.marquee-container {
  width: 100%;
  overflow: hidden;
}

.marquee-container p {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.marquee-container {
  width: 100%;
  overflow: hidden;
}

.marquee-container p {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 15s linear infinite;
}

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