自定义短网址,seo排名咨询,网络业务,网站建设 天猫 保证金思路#xff1a;由两个span模块组成#xff0c;第一个为空的span内容#xff0c;为的是实现第二个span内容缓慢出现的效果。
代码如下#xff1a; div classscrollingStylespan classfirst-marquee/spanspan class由两个span模块组成第一个为空的span内容为的是实现第二个span内容缓慢出现的效果。
代码如下 div classscrollingStylespan classfirst-marquee/spanspan classsecond-marquee系统通知【{{scrollingText}} 发布于{{time}}】/span/div.scrollingStyle {font-size: 16px;width: 300px;overflow: hidden; /*超出文本的范围就隐藏*/white-space: nowrap; /*超出文本的范围不换行*/text-overflow: ellipsis; /*在文本的范围内,末尾以...的形式展示*/}.first-marquee {/*第一个span的播放速度*/-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 {/* 第二个span的播完速度 */-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;}}
