新需求为：提示文字左右滚动，用户能点击按钮关闭提示
查到<marquee direction="left" scrollamount="2" scrolldelay="0"></marquee>，使用发现无法实现无缝滚动。
想要只用css实现该功能，使用css3动画实现代码如下：
HTML:
<div class="remind-block">
<div class="marquee-block">
<div class="marquee" (click)="goIdentity()">
这是一段很长的滚动文字
</div>
<div class="marqueeT" (click)="goIdentity()">
这是一段很长的滚动文字
</div>
</div>
<img (click)="closeAd()" src="xxx"/>
</div>
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;
}