html怎么左右无缝滚动,css实现文字左右无缝滚动

新需求为：提示文字左右滚动，用户能点击按钮关闭提示

查到，使用发现无法实现无缝滚动。

想要只用css实现该功能，使用css3动画实现代码如下：

HTML:

这是一段很长的滚动文字   

这是一段很长的滚动文字   

CSS:

.remind-block {

height: 30px;

line-height: 30px;

background-color: #fce9aa;

color: #947334;

position: relative;

overflow: hidden;

text-align: center;

width: 100%;

padding-right: 20px;

z-index: 100;

}

.marquee-block{

display: inline-block;

width:100%;

height: 100%;

vertical-align: middle;

overflow: hidden;

box-sizing: border-box;

padding-left: 15px;

position: relative;

}

.marquee {

animation: marquee 20s linear infinite;

white-space: nowrap;

position: absolute;

}

.marqueeT {

animation: marqueeT 20s linear infinite;

white-space: nowrap;

position: absolute;

}

@keyframes marquee {

0% { left: 0; }

100% { left: -110%;}

}

@keyframes marqueeT {

0% { left: 110%; }

100% { left: 0; }

}

.remind-block span{

border-bottom: 1px solid #947334;

font-weight:bold;

}

.remind-block img{

height:20px;

position: absolute;

right: 2px;

top: 5px;

}