如何创建字幕效果? [英] How can I create a marquee effect?

问题描述

我正在用CSS3动画创建字幕效果.

I'm creating a marquee effect with CSS3 animation.

#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.

是否有一种避免使用诸如margin-left:-4200px;之类的特定值的方法，以便它可以适应任何长度的文本?

Is there a way to avoid using specific values like margin-left:-4200px;, so that it can adapt text in any length?

这是一个类似的演示: http://jsfiddle.net/jonathansampson/XxUXD/使用text-indent，但仍具有特定值.

Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/ that uses text-indent but still with specific values.

推荐答案

在标记上做了一点改动，这是我的方法(我刚刚在段落内插入了span):

With a small change of the markup, here's my approach (I've just inserted a span inside the paragraph):

.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>
       O, let my land be a land where Liberty is crowned 
       with no false patriotic wreath, But opportunity is 
       real, and life is free, Equality is in the air we 
       breathe. – (Langston Hughes, 1902-1967)
   </span>
   </p>

未插入取决于段落宽度的硬编码值.

No hardcoded values — dependent on paragraph width — have been inserted.

动画应用了CSS3 transform属性(在需要时使用前缀)，因此效果很好.

The animation applies the CSS3 transform property (use prefixes where needed) so it performs well.

如果您只需要在开始时插入一次延迟，则还要设置一个animation-delay.如果您需要在每个循环中插入一个小的延迟，则尝试使用更高的padding-left(例如150%)

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 every loop then try to play with an higher padding-left (e.g. 150%)

这篇关于如何创建字幕效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！