css實現文字左右無縫滾動
新需求為:提示文字左右滾動,使用者能點選按鈕關閉提示
查到<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;
}