9

我想创建一个在网站上来回滚动的动画 HTML“选框”：

<div class="marquee">This is a marquee!</div>

和CSS：

.marquee {
    position: absolute;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

@-webkit-keyframes rightThenLeft {
    0%   {left: 0%;}
    50%  {left: 100%;}
    100% {left: 0%;}
}

问题是，当字幕到达屏幕的右边缘时，它不会停止。它一直从屏幕上移开（短暂地出现一个水平滚动条），然后又回来了。

那么，当右侧边缘到达屏幕的右边缘时，如何使车牌停止？

编辑：奇怪的是，这不起作用：

50% {right: 0%}
4

6 回答 6

3

您可以简单地使用CSS 动画文本生成器。已经有预先创建的模板

于 2013-02-19T12:02:37.363 回答
3

不知何故，我通过使用 margin-right 并将其设置为从右向左移动来使其工作。 http://jsfiddle.net/gXdMc/

不知道为什么在这种情况下，margin-right 100% 不会离开屏幕。：D（在 chrome 18 上测试）

编辑：现在从左到右也可以使用http://jsfiddle.net/6LhvL/

于 2012-05-21T04:45:41.310 回答
1

嗨，您可以使用以下方法实现您的结果 <marquee behavior="alternate"></marquee>

HTML

<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>

CSS

.wrapper{
    max-width: 400px;
    background: green;
    height: 40px;
    text-align: right;
}

.marquee {
    background: red;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

看演示：- http://jsfiddle.net/gXdMc/6/

于 2012-05-21T07:30:13.483 回答
1

我喜欢使用以下内容来防止事情超出我的div元素。它也有助于 CSS 翻转。

.marquee{
    overflow:hidden;
}

这将隐藏任何移动/在 div 之外的东西，这将阻止浏览器扩展并导致出现滚动条。

于 2013-04-24T00:41:06.310 回答
0

如果我正确理解你的问题，你可以在你的选框周围创建一个包装器，然后为包装元素分配一个width（或）。max-width例如：

<div id="marquee-wrapper">
    <div class="marquee">This is a marquee!</div>   
</div>

然后#marquee-wrapper { width: x }。

于 2012-05-21T04:04:22.913 回答
0

我不确定这是否是正确的解决方案，但我通过在动画 CSS 之后重新定义 .marquee 类来实现这一点。

检查以下：

<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>
于 2012-05-21T04:42:17.857 回答