CSS3實現橫向滾動播放

CSS3實現無限橫向滾動,縱向滾動同理，控制屬性left換成top既能夠

<div class="wrap2">
        <div class="p2">  
            <p class="p11">2020年消防工程報名條件已經公佈,各個地區的考生能夠根據自身條件查看是否符合標準  </p>
            <p class="p22">2020年消防工程報名條件已經公佈,各個地區的考生能夠根據自身條件查看是否符合標準  </p>
        </div>
</div>

注意這裏的-webkit-前綴必須加上，兼容不一樣的瀏覽器

.wrap2 .p2 {
    line-height: 30px;
    overflow: hidden;
    color: rgb(102 102 102);
    font-size: 12px;

}
.wrap2 .p2  p{
        position: absolute;
        height: 30px;
        overflow: hidden;
}
.wrap2 .p2  .p22{
    animation: scroll2  20s linear infinite  ;
    -webkit-animation: scroll2  20s linear infinite  ;
}
.wrap2 .p2  .p11{
   animation: scroll 20s linear infinite  ;
   -webkit-animation:scroll 20s linear infinite  ;
}
.wrap2{
       height: 47px;
       position: relative;
       overflow: hidden;
}
@keyframes scroll2
{
    0% { left: 150%; }
    100% { left: 0; }

}
@keyframes scroll
{
  
    0% { left: 0; }
    100% { left: -150%;}

}
@-webkit-keyframes scroll2 
{
    0% { left: 150%; }
    100% { left: 0; }
}
@-webkit-keyframes scroll 
{
    0% { left: 0; }
    100% { left: -150%;}
}