思路:由两个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;}}