思路:由两个span模块组成,第一个为空的span内容,为的是实现第二个span内容缓慢出现的效果。
代码如下:
< div class = " scrollingStyle" > < span class = " first-marquee" > </ span> < span class = " second-marquee" > 系统通知:【{{scrollingText}} 发布于:{{time}}】</ span> </ div>
.scrollingStyle { font-size : 16px; width : 300px; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; } .first-marquee { -webkit-animation : 5s first-marquee 1s linear infinite normal; animation : 5s first-marquee linear 1s infinite normal; padding-right : 100%; } @keyframes first-marquee { 0% { -webkit-transform : translate3d ( 0, 0, 0) ; transform : translate3d ( 0, 0, 0) ; } 100% { -webkit-transform : translate3d ( -200%, 0, 0) ; transform : translate3d ( -200%, 0, 0) ; display : none; } } .second-marquee { -webkit-animation : 25s first-marquee linear infinite normal; animation : 25s first-marquee linear infinite normal; padding-right : 53%; } @keyframes second-marquee { 0% { -webkit-transform : translate3d ( 0%, 0, 0) ; transform : translate3d ( 0%, 0, 0) ; } 100% { -webkit-transform : translate3d ( -200%, 0, 0) ; transform : translate3d ( -200%, 0, 0) ; display : none; } }