最简marquee走马灯替代

最新推荐文章于 2025-06-24 10:59:00 发布

污斑兔

最新推荐文章于 2025-06-24 10:59:00 发布

阅读量120

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript html css

本文链接：https://blog.youkuaiyun.com/zweizhao/article/details/142280772

<div class="marquee">
  <div class="marquee-scroll-box">
    <div class="marquee-item">2020-09-27 11:20 用户138****8490充值成功10元1</div>
    <div class="marquee-item">2020-09-27 11:20 用户138****8490充值成功10元2</div>
    <div class="marquee-item">2020-09-27 11:20 用户138****8490充值成功10元3</div>
    <div class="marquee-item">2020-09-27 11:20 用户138****8490充值成功10元4</div>
    <div class="marquee-item">2020-09-27 11:20 用户138****8490充值成功10元1</div>
    <div class="marquee-item">2020-09-27 11:20 用户138****8490充值成功10元2</div>
    <div class="marquee-item">2020-09-27 11:20 用户138****8490充值成功10元3</div>
    <div class="marquee-item">2020-09-27 11:20 用户138****8490充值成功10元4</div>
  </div>
</div>

.marquee {
  position: relative;
  height: 88px;
  width: 620px;
  overflow: hidden;
  color: var(--main_color);
  .marquee-scroll-box {
    position: absolute;
    top: 0;
    left: 0;
    animation: marquee 5s linear infinite;
    .marquee-item {
      height: 30px;
      line-height: 24px;
      font-size: 24px;
    }

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