前端跑马灯Marquee，实现文字的灵活移动

前端

2022-11-10 03:14:43

跑马灯：利用动画点亮你的页面

跑马灯，这种简单而醒目的动画效果，多年来一直是网页设计的基石。它是一种既引人注目又信息丰富的元素，可以吸引访客并传达重要信息。无论您是网站新手还是经验丰富的开发者，了解跑马灯的原理和实现方法将使您能够充分利用这一强大的视觉工具。

跑马灯的内幕：技术原理

跑马灯的本质在于其利用 CSS 中的 transition 和 animation 属性。

过渡 (transition)： 控制元素从一种状态平滑过渡到另一种状态，例如从一个位置移动到另一个位置。
动画 (animation)： 定义一系列过渡，形成一个完整的动画序列，例如在特定时间内移动元素。

实现跑马灯：两种方法

实现跑马灯有两种流行的方法：

方法 1：过渡驱动的跑马灯

这是最简单的实现方法，使用 transition 属性：

.marquee {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.marquee-text {
  width: 400px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  transition: transform 1s ease-in-out;
}

.marquee-text:hover {
  transform: translateX(-200px);
}

方法 2：动画驱动的跑马灯

这种方法更灵活，使用 animation 属性允许自定义动画：

.marquee {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.marquee-text {
  width: 400px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  animation: marquee 1s ease-in-out infinite;
}

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

  100% {
    transform: translateX(-200px);
  }
}