技术栈 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;