User:小躍/Test.css
< User:小躍
注意:保存之后,你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari:按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。
.marquee {
position: relative;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
/* Starting position */
-moz-transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transform:translateX(-100%);
/* Apply animation to this element */
-moz-animation: marquee 15s linear infinite;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes marquee {
0% { -moz-transform: translateX(-100%); }
100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes marquee {
0% { -webkit-transform: translateX(-100%); }
100% { -webkit-transform: translateX(100%); }
}
@keyframes marquee {
0% {
-moz-transform: translateX(0%); /* Firefox bug fix */
-webkit-transform: translateX(0%); /* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
}