如何创建字幕效果？

小编典典

如何创建字幕效果？

html

我正在使用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但仍具有特定值。

阅读 238

2020-05-10

共1个答案

小编典典

只需稍加更改标记，这就是我的方法（我刚刚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>

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

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

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

2020-05-10