Question

我想从右向左滚动文本，我正在使用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%); 
    }
 }

Answer 1

我在不同的计算机上测试了相同的代码并且工作正常。所以我认为它的屏幕分辨率问题

滚动文本正在闪烁

1 个答案: