我想从右向左滚动文本,为此我正在使用 css,但文本在闪烁。有没有其他方法可以使文本不闪烁?请帮忙。
HTML 是
<div class="scroll-left">
<p>CSS scrolling text... </p>
</div>
CSS 是
.scroll-left{
margin-top: -130px;
font-size: 140px;
color: rgb(255, 255, 255);
}
.scroll-left p {
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 10s linear infinite;
-webkit-animation: scroll-left 10s linear infinite;
animation: scroll-left 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
最佳答案
我在不同的计算机上测试了相同的代码,它运行良好。所以我认为它的屏幕分辨率问题
关于html - 滚动文字闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32110129/