如何创建字幕效果？

如何创建字幕效果？

只需稍加更改标记，这就是我的方法（我刚刚

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;    animation: marquee 15s linear infinite;}.marquee span:hover {  animation-play-state: paused}@keyframes marquee {  0% {    transform: translate(0, 0);  }  100% {    transform: translate(-100%, 0);  }}@media (prefers-reduced-motion: reduce) {  .marquee {    white-space: normal  }  .marquee span {    animation: none;    padding-left: 0;  }}<p >   <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%

）