html - 滚动文字闪烁

标签 html css

我想从右向左滚动文本,为此我正在使用 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/

相关文章:

javascript - Highcharts 背景和其他组件无法正常工作

javascript - 单击图标后编辑信息

css - 如何在 Bootstrap 网格系统上进行水平滚动?

javascript - 网页动画背后的技术是什么?

javascript - jQuery 可调整大小的子句柄

javascript - CckEditor将源代码<strike>标签编辑为<s>标签

html - 是否可以仅使用 CSS 在两个段落之间放置一个 DIV?

css - 当元素数等于列数时,chrome 和 safari 以不同方式呈现 css 列

javascript - 如何隐藏鼠标悬停在按钮或链接上时跟随光标的箭头

JQuery $(document).ready ajax 加载