使用css3实现文字横向滚动循环

html

<div class="remind-block">
   <div class="marquee-block">
     <div class="marquee">这是一段很长的滚动文字   div>
     <div class="marqueeT">这是一段很长的滚动文字   div>
   div>
div>

这里简单的阐述下，

1. remind-block这个div是最外层盒子，没什么好说的。
2. 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;
    
    }

可以看到，关键的两个动画：

1. marquee这个动画是负责结尾过度，在真正的文字到达最左边时，他的动画结束会回到最右边，这时候如果没有这个就会显得很突兀。
2. marqueeT这个就是真正的显示文字动画。