css实现可关闭的文字无缝滚动banner

技术栈 react，效果如图

<div className="scroll">
	<div className="marquee_box">
		<div id="marquee_left">
			<p>这里是滚动的内容内容内容内容内容内容内容内容内容内容内容内容内容。</p>
		</div>
	</div>
	<span className="close" onClick={()=>this.closeBanner()}>x</span>
</div>

.scroll{
    width: 100%;
    background: #FFEAAE;
    height: 35px;
    line-height: 35px;
    color: #9C5629;
    padding: 0 30px 0 20px;
    position: relative;
  }
  .close{
    display: block;
    position: absolute;
    width: 30px;
    text-align: center;
    right: 0;
    bottom: 0;
  }
  .marquee_box{
    width: 100%;
    overflow: hidden;
  }
  #marquee_left{
    width: 1000px;
  }
  #marquee_left>p{
    display:inline-block;
    animation: infinite 10s left linear;
  }
  #marquee_left:hover p{
    animation-play-state:paused;
  }
  @keyframes left{
    from{transform: translateX(0);}
    to{transform: translateX(-100%);}
  }

const marquee = document.getElementById('marquee_left');
const contents =  marquee.innerHTML;
marquee.innerHTML = contents + contents;