Question

我试图写移动/滚动文字。

所以最后我有了这个。

你可以看到一个问题。 diplay的问题同时在 p 标签内的两个文本。我想显示第一个然后应该显示第二个。

我试图更改此

的值

@-moz-keyframes left-one {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes left-one {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes left-one {
   0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

我的意思是0％到50％，但不好。

我如何解决？

Answer 1

您想要显示的动画的整个画面是30秒长，而不是15秒。每个动画在屏幕上显示为15秒，但如果您考虑第一个动画的时间+第二个动画的时间，则整个动画为30秒，因此它们不会重叠。

因此，将两者的动画时间更改为30秒，并在前15秒（0-50％）中执行第一个动画，并在过去15秒内执行第二个动画（50-100％）

＆＃13;

.movetext {
  width: 100%;
  height: 50px;
  overflow: hidden;
  position: relative;
  background-color: black;
}

.movetext p {
  position: absolute;
  font-family: Verdana, Arial;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: yellow;
  font-weight: bold;
  font-size: 20px;
  transform: translateX(100%);
}

.movetext p:nth-child(1) {
  animation: left-one 30s linear infinite;
}

.movetext p:nth-child(2) {

  animation: left-two 30s linear infinite;
}

@keyframes left-one {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes left-two {
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

＆＃13;

<div class="container">
  
<div class="movetext">
  <p>Something is here.</p>
  <p>But maybe something will be here.</P>
</div>

</div>

＆＃13;

Answer 2

谢谢你。它工作得很好。：）

我看到移动视图存在一些问题。所有文字都无法正确显示。它只是切断了。对于其他分辨率（＆gt; 768），一切都很好。

那怎么样。我该怎么办呢？

修改

我看到了这个问题。 P标签设置类的宽度。我知道我可以设置，例如。 700px，但我想标记宽度文本的设置宽度。

滚动文本 - intems同时显示

2 个答案: