css3跑马灯效果

1. 效果图

marquee.gif

2 代码

<html>
<head>
  <style>
    .marquee-box {
      width: 400px;
      height: 60px;
      background: red;
      color: #FFF;
      overflow: hidden;
      position: relative;
      white-space: nowrap;
    }

    .marquee-span {
      margin: 0 auto;
      position: relative;
      display: inline;
      height: auto;
      font-size: 20px;
      top: 50%; 
      font-weight: bold;
      animation: marqueeLeft 20s linear infinite;
    }

    @keyframes marqueeLeft {
      from {
        transform: translateX(0) translateY(-50%); /* 自身节点*/
        left: 100%; /* 继承父节点，让文字从最右侧开始显示*/
      }

      to {
        transform: translateX(-100%) translateY(-50%);
        left: 0;
      }
    }
  </style>
</head>

<body>
  <div class='marquee-box'>
    <div class='marquee-span'>据了解，疫情发生以来，国务院联防联控机制科研攻关组疫苗研发专班和有关方面以战时状态推进疫苗各方面工作，科研人员争分夺秒、奋力攻关。目前5条技术路线共15个疫苗进入临床试验。</div>
  </div>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容