CSS-从左到右移动文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10679367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS-moving text from left to right
提问by tanis.control
I want to create an animated HTML "marquee" that scrolls back and forth on a website:
我想创建一个在网站上来回滚动的动画 HTML“选框”：
<div class="marquee">This is a marquee!</div>
and the CSS:
和 CSS：
.marquee {
position: absolute;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
@-webkit-keyframes rightThenLeft {
0% {left: 0%;}
50% {left: 100%;}
100% {left: 0%;}
}
The problem is, the marquee doesn't stop when it reaches the right-hand edge of the screen; it moves all the way off the screen (making a horizontal scroll bar appear, briefly) and then comes back.
问题是，选取框在到达屏幕右侧边缘时不会停止；它一直移出屏幕（短暂地出现一个水平滚动条）然后返回。
So, how do I make the marquee stop when its right-hand edge reaches the right-hand edge of the screen?
那么，当它的右边缘到达屏幕的右边缘时，如何使门柱停止？
EDIT: Oddly, this does not work:
编辑：奇怪的是，这不起作用：
50% {right: 0%}
采纳答案by ephemeron
Somehow I got it to work by using margin-right, and setting it to move from right to left. http://jsfiddle.net/gXdMc/
不知何故，我通过使用 margin-right 并将其设置为从右向左移动来使其工作。 http://jsfiddle.net/gXdMc/
Don't know why for this case, margin-right 100% doesn't go off the screen. :D (tested on chrome 18)
不知道为什么在这种情况下，margin-right 100% 不会离开屏幕。:D（在 chrome 18 上测试）
EDIT: now left to right works too http://jsfiddle.net/6LhvL/
编辑：现在从左到右也可以工作http://jsfiddle.net/6LhvL/
回答by Timur Gafforov
You could simply use CSS animated text generator. There are pre-created templates already
您可以简单地使用CSS 动画文本生成器。已经有预先创建的模板
回答by Shailender Arora
Hi you can achieve your result with use of <marquee behavior="alternate"></marquee>
嗨，您可以使用 <marquee behavior="alternate"></marquee>
HTML
HTML
<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>
CSS
CSS
.wrapper{
max-width: 400px;
background: green;
height: 40px;
text-align: right;
}
.marquee {
background: red;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
see the demo:- http://jsfiddle.net/gXdMc/6/
回答by Spider Pig
I like using the following to prevent things being outside my divelements. It helps with CSS rollovers too.
我喜欢使用以下内容来防止事情超出我的div元素。它也有助于 CSS 翻转。
.marquee{
overflow:hidden;
}
this will hide anything that moves/is outside of the div which will prevent the browser expanding and causing a scroll bar to appear.
这将隐藏任何移动/位于 div 之外的内容，这将阻止浏览器扩展并导致出现滚动条。
回答by David542
If I understand you question correctly, you could create a wrapper around your marquee and then assign a width(or max-width) to the wrapping element. For example:
如果我正确理解您的问题，您可以在选取框周围创建一个包装器，然后将width(或max-width)分配给包装元素。例如：
<div id="marquee-wrapper">
<div class="marquee">This is a marquee!</div>
</div>
And then #marquee-wrapper { width: x }.
然后#marquee-wrapper { width: x }。
回答by sachin kumar
I am not sure if this is the correct solution but I have achieved this by redefining .marquee class just after animation CSS.
我不确定这是否是正确的解决方案，但我通过在动画 CSS 之后重新定义 .marquee 类来实现这一点。
Check below:
检查以下：
<style>
#marquee-wrapper{
width:700px;
display:block;
border:1px solid red;
}
div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}
@-moz-keyframes myfirst /* Firefox */{
0% {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{
left:700px; top:0px
}
</style>
<!-- HTMl COde -->
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>
