[分享]css3常见跑马灯效果

CSS3具有丰富的动画效果，其中跑马灯效果十分常见。使用CSS3实现跑马灯效果有多种方式，下面介绍一些常见的实现方法。/ 方案一：使用animation动画效果 / .marquee { width:...

CSS3具有丰富的动画效果，其中跑马灯效果十分常见。使用CSS3实现跑马灯效果有多种方式，下面介绍一些常见的实现方法。

/* 方案一：使用animation动画效果 */
.marquee {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  animation: marquee 5s linear infinite;
}
.marquee:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}

/* 方案二：使用transform动画效果 */
.marquee {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.marquee:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 100%;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}
.marquee:hover:before {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* 方案三：使用transition过渡效果 */
.marquee {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.marquee:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  white-space: nowrap;
  transition: transform 5s linear;
}
.marquee:hover:before {
  transform: translateX(-100%);
} 

以上三种方案都能实现跑马灯效果，具体选择哪种方案可以根据自己的实际需求来决定。其中方案一的animation动画效果最为常用，适合需要一直循环播放跑马灯的情况。方案二使用transform动画效果，能够实现更为流畅的动画效果；而方案三使用transition过渡效果，则能够在鼠标悬停时停止跑马灯滚动。