css3 文字横向无缝滚动

    <div class="notice-container">

          <i class="horn fa fa-bullhorn"></i>

          <div class="header-notice-marquee" id="notice-marquee">

            <span class="header-marquee-item1">尊敬的会员您好，如您遇到无法充值问题</span>

            <span class="header-marquee-item2">尊敬的会员您好，如您遇到无法充值问题</span>

          </div>

        </div> 

 

.notice-container {

  padding: 0 10px;

  align-items: center;

  margin: 0 auto;

  display: flex;

  flex-direction: row;

  flex: 1;

}

.header-notice-marquee {

  white-space: nowrap;

  overflow: hidden;

  position: relative;

  width: 100%;

  height: 20px;

  line-height: 20px;

}

.notice-container .header-marquee-item1 {

  margin: 0 10px;

  position: absolute;

  left: 0;

  animation: marquee1 15s linear 8;

}

.notice-container .header-marquee-item2 {

  margin: 0 10px;

  position: absolute;

  left: 0;

  animation: marquee2 15s linear 8;

}

.notice-container .header-notice-marquee:hover {

  animation-play-state: paused;

}

.notice-container .header-notice-marquee .header-marquee-item {

  position: absolute;

  top: 0;

  left: 0;

  white-space: nowrap;

}

 

@keyframes marquee1 {

  0% {

    left: 0;

  }

  100% {

    left: -100%;

  }

}

@keyframes marquee2 {

  0% {

    left: 100%;

  }

  100% {

    left: 0%;

  }

}