[英]how to hidden the scrolling text word by word
I want to scroll the text, word by word, left to right. 我想从左到右逐字滚动文本。 Just like this page , the word scrolling word by word until the last word. 就像此页面一样 ,单词逐字滚动直到最后一个字。 Then it will start again once the last word is hidden. 一旦最后一个单词被隐藏,它将重新开始。
I am not use <marquee>
for iOS because the scrolling text seems like not scrolling smooth like in Android. 我没有在iOS上使用<marquee>
,因为滚动文本似乎不像Android中那样平滑滚动。 So, I did some changes in my code . 因此,我对代码进行了一些更改。
The result is the scrolling text was not hidden word by word until the last word. 结果是滚动文本直到最后一个单词才被逐字隐藏。 The last word not finish scrolling but suddenly it dissapear in a half way. 最后一个单词没有完成滚动,但突然消失了一半。 Then it start srcolling again. 然后它再次开始抽烟。
try this css code 试试这个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%);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.