Question

我遇到的文字渐渐消失，一个接一个地淡出。

在开发人员模式下，我能够看到序列中0到1到0之间文本的不透明度不同。这是如何实现的？

<div class="text" style="opacity: 0;">The</div> 
<div class="text" style="opacity: 0;">Nomads</div>

Answer 1

这是一个使用CSS3动画和keyframes属性的非常简单的方法（请注意我已编辑此答案以包含Frits的改进＆＃39;评论）

虽然您可能需要稍微调整一下

一个接一个淡出淡出的文本

是一个非常失败的规范。

＆＃13;

/* Define the key frames for animating the fade in / fade out */

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* attach the animations to the elements via their id attribute using a delay of 0s and 50% of the runtime respectively */

#one {
  animation: fade 3s infinite 0s;
}

#two {
  animation: fade 3s infinite 1.5s;
}

＆＃13;

<p id="one">
  This line of text will fade out as the next lines fade in
</p>
<p id="two">
  This line of text will fade in as the previous lines fade out
</p>

＆＃13;

Answer 2

您可以使用以下内容：

显然我将使用JQuery ：

jQuery('<div_name>').css('opacity', '<opacity_value>');

需要淡出淡出文本的顺序

2 个答案: