Question

我想逐字逐句滚动文字。就像这个page一样，单词逐字滚动直到最后一个单词。然后，一旦隐藏了最后一个单词，它将再次启动。

我没有使用<marquee>用于iOS，因为滚动文本似乎不像Android中那样滚动平滑。所以，我在code中做了一些更改。

结果是滚动文本没有一字一句地隐藏，直到最后一个单词。最后一个字没有完成滚动，但突然间它在一半中消失了。然后它又开始srcolling。

Answer 1

试试这个css代码

body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

.scroll-left {
height: 50px;
position: relative;
overflow: hidden;
}

.scroll-left p {
white-space: nowrap !important;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
/* Apply animation to this element */
-moz-animation: scroll-left 20s linear infinite;
-webkit-animation: scroll-left 20s linear infinite;
animation: scroll-left 20s linear infinite;
}

@-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%);
  width:165%;
    /* Browser bug fix */
    -webkit-transform: translateX(-100%);
    /* Browser bug fix */
    transform: translateX(-100%);
}
}

如何逐字隐藏滚动文本

1 个答案: