我想创建一个在网站上来回滚动的动画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%}
不知何故,我通过使用右边距并将其设置为从右向左移动来使其工作。http://jsfiddle.net/gXdMc/
不知道为什么在这种情况下,边距右 100% 不会离开屏幕。 :D(在 Chrome 18 上测试(
编辑:现在从左到右工作太 http://jsfiddle.net/6LhvL/
您可以简单地使用CSS动画文本生成器。已经有预先创建的模板
您可以使用<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/
我喜欢使用以下内容来防止事物超出我的div
元素。它也有助于CSS翻转。
.marquee{
overflow:hidden;
}
这将隐藏任何在div 之外移动/位于div 之外的内容,这将阻止浏览器扩展并导致滚动条出现。
如果我理解你的问题正确,你可以在你的选框周围创建一个包装器,然后为包装元素分配一个width
(或max-width
(。例如:
<div id="marquee-wrapper">
<div class="marquee">This is a marquee!</div>
</div>
然后#marquee-wrapper { width: x }
.
我不确定这是否是正确的解决方案,但我已经实现了通过在动画 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>