通告栏最简使用方案

多行上下轮播 使用swiper 代码如图
单行轮播可以使用css动画来实现
.notice {
position: absolute;
display: block;
white-space: nowrap;
padding-left: 100%;
animation: notice 10s 0s linear infinite both;
animation-play-state: paused;
/ 设置时间 /
animation-duration: 10s;
animation-play-state: running;
animation-delay: -3.51s;
}

@keyframes notice {  
    100% {  
        transform: translate3d(-100%, 0, 0);  
    }  
}