Question

我创建了一个＆＃34;重要通知＆＃34;栏我希望文本在屏幕上滚动。

这是通过动画text-indent来实现的，这似乎效果很好，直到我的文字长于屏幕的宽度。

这是HTML：

<div class="sitemessage">
    dfgh hgsl;k sfghjh fgdlj dflgh sg jls sdfhsdkjldfjksg sdfg ksjdfhg klsjdfhg lksjdfhg klsjdhg lksjdhfg sldkfjgh sdflgkjsdfglk jsdfg klsdfgl jksdfgl jksdfg ljsdfgkjl dafglkj adfgkl sdfgkjh sdfgkhl sdfg kjlsdfgk lsdfgk jl sdfgkl adfgkl adfgklj sdfgklhj sdfgkl jdfg kljafdg ljkdfg klsdfgkhjl sdfgk jlsdfgkhj dfgkhl adfgkj adfkljg a
</div>

这是我的CSS：

.sitemessage {
    width:100%;
    max-width: 960px;
    margin:auto;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 965px;
    animation: floatText 15s infinite linear;
}

.sitemessage:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@-webkit-keyframes floatText{
    from {
        text-indent: 100%;
    }

    to {
        text-indent: -100%;
    }
}

@media screen and (min-width: 960px) {
    @-webkit-keyframes floatText{
        from {
            text-indent: 960px;
        }

        to {
            text-indent: -100%;
        }
    }
}

我遇到的问题是.sitemessage容器中文本的长度可能比屏幕宽度的100％多得多或少得多，因此使用text-indent -100％不会真的有用。

我可以做的任何想法，无需借助Javascript或添加到HTML。

Answer 1

您可以尝试使用transform代替text-indent。

<强> jsFiddle

＆＃13;

.sitemessage {
  display: inline-block;
  white-space: nowrap;
  animation: floatText 15s infinite linear;
  padding-left: 100%; /*Initial offset*/
}
.sitemessage:hover {
  animation-play-state: paused;
}
@keyframes floatText {
  to {
    transform: translateX(-100%);
  }
}

＆＃13;

<div class="sitemessage">
  START dfgh hgsl;k sfghjh fgdlj dflgh sg jls sdfhsdkjldfjksg sdfg ksjdfhg klsjdfhg lksjdfhg klsjdhg lksjdhfg sldkfjgh sdflgkjsdfglk jsdfg klsdfgl jksdfgl jksdfg ljsdfgkjl dafglkj adfgkl sdfgkjh END
</div>

＆＃13;

CSS使用text-indent动画滚动文本

1 个答案: