需要逐漸淡入淡出文字

Question

我遇到了淡入淡出的文字。

在開發人員模式下，我可以看到文本從0到1的不透明度隨序列而變化。這是如何實現的？

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

Answer 1

您可以使用以下方法：

很明顯，我打算使用JQuery：

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

Answer 2

下面是使用CSS3動畫和keyframes財產一個非常簡單的方法（請注意：我已經編輯了這個答案，包括來自Frits的評論的改進）

Alth ough您可能需要調整它少

其淡入淡出一個文本的其他

後是一個相當失去規範。

/* 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; 
 
}

<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>