Question

我正在为网站的移动版本开发这种简单的字幕效果，我的问题是所有段落都是重叠的。

我只想看一遍，然后重复。

希望你能帮助我。

谢谢。

HTML

<div class="marquee">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p>quis rem exercitationem perspiciatis ducimus repellat dicta sapiente totam aperiam repellendus eos libero.</p>
            <p>Placeat hic magnam nostrum sit tempore labore ipsa rerum</p>
    </div>

CSS

    .marquee {
        width: 100%;
  height:30px;
  overflow: hidden;
  position: relative;
}
.marquee p {
    position: absolute;
  width: auto;
  height: 100%;
  font-size:13px;
  line-height: 20px;
    margin: 0;
    line-height: 30px;
  text-align: center;
  white-space:nowrap;
  /* Starting position */

  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  /* Apply animation to this element */

  -moz-animation: scroll-left 30s linear infinite;
  -webkit-animation: scroll-left 30s linear infinite;
  animation: scroll-left 30s linear infinite;
}

对不起，我剪切了CSS代码，它的时间太长，无法提交。

jsfiddle

Answer 1

检查：https://jsfiddle.net/Lxp983mt/2/

我分别向您的animation-delay元素添加了p并更改了样式（您会在任何更改之前找到评论）

注意：如果要增加animation-duration，则必须在animation-duration元素上使用p值

Answer 2

而不是在单个段落标签中使用单独的标签放置内容。

   <div class="marquee">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. quis rem exercitationem perspiciatis ducimus repellat dicta sapiente totam aperiam repellendus eos libero. Placeat hic magnam nostrum sit tempore labore ipsa rerum</p>
   </div>

CSS字幕：多个段落重叠

2 个答案: