html
<div class="remind-block">
<div class="marquee-block">
<div class="marquee">这是一段很长的滚动文字 </div>
<div class="marqueeT">这是一段很长的滚动文字 </div>
</div>
</div>
这里简单的阐述下,
remind-block
这个div是最外层盒子,没什么好说的。marquee-block
用来播放循环动画的盒子,里面会放置两个元素。当然,只有一个是用来显示的,另一个则要负担上每次循环结束时的过度场景。
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 10s linear infinite;
white-space: nowrap;
position: absolute;
}
.marqueeT {
animation: marqueeT 10s linear infinite;
white-space: nowrap;
position: absolute;
}
@keyframes marquee {
0% { left: 0; }
100% { left: -105%;}
}
@keyframes marqueeT {
0% { left: 105%; }
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;
}
可以看到,关键的两个动画:
marquee
这个动画是负责结尾过度,在真正的文字到达最左边时,他的动画结束会回到最右边,这时候如果没有这个就会显得很突兀。marqueeT
这个就是真正的显示文字动画。