CSS 使用文本缩进动画滚动文本

问题描述

我创建了一个重要通知"栏，我希望文本在屏幕上滚动.

它是通过对 text-indent 设置动画来实现的，在我的文本长度超过屏幕宽度之前，它似乎运行良好.

这是 HTML:

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一个

这是我的 CSS:

.sitemessage {宽度:100%；最大宽度:960px；保证金:自动；空白:nowrap；溢出:隐藏；文本缩进:965px；动画:floatText 15s 无限线性；}.sitemessage:悬停{-webkit-animation-play-state:暂停；-moz-animation-play-state:暂停；-o-animation-play-state:暂停；动画播放状态:暂停；}@-webkit-keyframes floatText{从 {文本缩进:100%；}到 {文本缩进:-100%；}}@media 屏幕和(最小宽度:960px){@-webkit-keyframes floatText{从 {文本缩进:960px；}到 {文本缩进:-100%；}}}

我遇到的问题是 .sitemessage 容器中的文本长度可能比屏幕宽度的 100% 多很多或少很多，所以使用 text-缩进 -100% 不会真正起作用.

我可以在不求助于 Javascript 或添加到 HTML 的情况下做的任何想法.

解决方案

您可以尝试使用 transform 而不是 text-indent.

jsFiddle

.sitemessage {显示:内联块；空白:nowrap；动画:floatText 15s 无限线性；填充左:100%；/*初始偏移*/}.sitemessage:悬停{动画播放状态:暂停；}@keyframes floatText {到 {变换:translateX(-100%);}}

开始 dfgh hgsl;k sfghjh fgdlj dflgh sg jls sdfhsdkjldfjksg sdfg ksjdfhg klsjdfhg lksjdfhg klsjdhg lksjdhfg sldkfjgh sdflgkjsgdfglsgdfgdfgdfgdfgdfgdfgdfkdfgdfkdfgdfgdfkdfgdfgdfkdfgdfgdfgdfgdfkdfgdfgdfkdfgdfgdfgdfkdfgdfkdfgdf

I have created an "Important Notice" bar where I want the text to scroll across the screen.

It is achieved by animating the text-indent which seemed to work well until I had text which was longer than the width of the screen.

Here's the 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>

And here's my 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%;
        }
    }
}

The problem I have is that the length of the text in the .sitemessage container could be a lot more or a lot less than 100% of the screen width, so using text-indent of -100% won't really work.

Any ideas of something I can do without resorting to Javascript or adding to the HTML.

解决方案

You can try using transform instead of text-indent.

jsFiddle

.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%);
  }
}

<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>

这篇关于CSS 使用文本缩进动画滚动文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！