如何创建字幕效果？

Fred Wu 发表于 Dev

吴

我正在使用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>

现在，我可以获得基本的字幕效果，但是该代码对于此演示来说太具体了。

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

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

法布里佐·卡尔德兰（Fabrizio Calderan）

在更改标记后，这就是我的方法（我刚刚span在段落中插入了一个内部）：

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;

  padding-left: 100%;
  /* show the marquee just outside the paragraph */
  will-change: transform;
  animation: marquee 15s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}


/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01; 
    /* instead of animation: none, so an animationend event is 
     * still available, if previously attached.
     */
    width: auto;
    padding-left: 0;
  }
}

<p class="marquee">
   <span>
       When I had journeyed half of our life's way, I found myself
       within a shadowed forest, for I had lost the path that 
       does not stray. – (Dante Alighieri, <i>Divine Comedy</i>. 
       1265-1321)
   </span>
   </p>

没有插入硬编码的值（取决于段落宽度）。

该动画应用了CSS3transform属性（在需要时使用前缀），因此效果良好。

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