新需求为:提示文字左右滚动,用户能点击按钮关闭提示
查到,使用发现无法实现无缝滚动。
想要只用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;
}