Html 如何创建选框效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21233033/
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
How can I create a marquee effect?
提问by Fred Wu
I'm creating a marquee effect with CSS3 animation.
我正在使用 CSS3 动画创建字幕效果。
#caption {
position: fixed;
bottom: 0;
left: 0;
font-size: 20px;
line-height: 30px;
height:30px;
width: 100%;
white-space: nowrap;
-moz-animation: caption 50s linear 0s infinite;
-webkit-animation: caption 50s linear 0s infinite;
}
@-moz-keyframes caption {
0% { margin-left:120%; } 100% { margin-left:-4200px; }
}
@-webkit-keyframes caption {
0% { margin-left:120%; } 100% { margin-left:-4200px; }
}<div id="caption">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>Now I can get the basic marquee effect, but the code is too specific for this demo.
现在我可以得到基本的跑马灯效果，但是代码对于这个演示来说太具体了。
Is there a way to avoid using specific values like margin-left:-4200px;, so that it can adapt text in any length?
有没有办法避免使用诸如 之类的特定值margin-left:-4200px;，以便它可以适应任何长度的文本？
Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/that uses text-indentbut still with specific values.
这是一个类似的演示：http: //jsfiddle.net/jonathansampson/XxUXD/使用text-indent但仍具有特定值。
回答by Fabrizio Calderan
With a small change of the markup, here's my approach (I've just inserted a spaninside the paragraph):
对标记稍作改动，这是我的方法（我刚刚span在段落中插入了一个）：
.marquee {
width: 450px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
will-change: transform;
/* show the marquee just outside the paragraph */
animation: marquee 15s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
}
/* Make it move */
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Respect user preferences about animations */
@media (prefers-reduced-motion: reduce) {
.marquee {
white-space: normal
}
.marquee span {
animation: none;
padding-left: 0;
}
}<p class="marquee">
<span>
Windows 8 and Windows RT are focused on your life—your friends
and family, your apps, and your stuff. With new things like the
Start screen, charms and a Microsoft account, you can spend
less time searching and more time doing.
</span>
</p>No hardcoded values — dependent on paragraph width — have been inserted.
没有插入硬编码值（取决于段落宽度）。
The animation applies the CSS3 transformproperty (use prefixes where needed) so it performs well.
动画应用了 CSS3transform属性（在需要的地方使用前缀）所以它表现良好。
If you need to insert a delay just once at the beginning then also set an animation-delay. If you need instead to insert a small delay at everyloop then try to play with an higher padding-left(e.g. 150%)
如果您只需要在开始时插入一次延迟，那么还要设置一个animation-delay. 如果您需要在每个循环中插入一个小的延迟，然后尝试使用更高的padding-left（例如150%）
回答by Mosè Bottacini
Based on the previous reply, mainly @fcalderan, this marquee scrolls when hovered, with the advantage that the animation scrolls completely even if the text is shorter than the space within it scrolls, also any text length takes the same amount of time (this may be a pros or a cons) when not hovered the text return in the initial position.
基于之前的回复，主要是@fcalderan，这个选框在悬停时滚动，优点是即使文本比滚动的空间短，动画也会完全滚动，而且任何文本长度都需要相同的时间（这可能是优点还是缺点）当没有悬停时，文本返回到初始位置。
No hardcoded value other than the scroll time, best suited for small scroll spaces
除了滚动时间之外没有硬编码值，最适合小滚动空间
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
display: inline-flex;
}
.marquee span {
display: flex;
flex-basis: 100%;
animation: marquee-reset;
animation-play-state: paused;
}
.marquee:hover> span {
animation: marquee 2s linear infinite;
animation-play-state: running;
}
@keyframes marquee {
0% {
transform: translate(0%, 0);
}
50% {
transform: translate(-100%, 0);
}
50.001% {
transform: translate(100%, 0);
}
100% {
transform: translate(0%, 0);
}
}
@keyframes marquee-reset {
0% {
transform: translate(0%, 0);
}
}<span class="marquee">
<span>This is the marquee text</span>
</span>回答by Lars Beck
The following should do what you want.
以下应该做你想做的。
@keyframes marquee {
from { text-indent: 100% }
to { text-indent: -100% }
}
回答by Pixelomo
The accepted answers animation does not work on Safari, I've updated it using translate instead of padding-left which makes for a smoother, bulletproof animation.
接受的答案动画在 Safari 上不起作用，我已经使用 translate 而不是 padding-left 更新了它，这使得动画更流畅，防弹。
Also, the accepted answers demo fiddle has a lot of unnecessary styles.
此外，公认的答案演示小提琴有很多不必要的样式。
So I created a simple version if you just want to cut and paste the useful code and not spend 5 mins clearing through the demo.
所以我创建了一个简单的版本，如果你只是想剪切和粘贴有用的代码而不是花 5 分钟来完成演示。
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
padding: 0;
height: 16px;
display: block;
}
.marquee span {
display: inline-block;
text-indent: 0;
overflow: hidden;
-webkit-transition: 15s;
transition: 15s;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}<p class="marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>