文本逐字显示 - 代码学习库

文本逐字显示

瓜皮之牙祝大家：恭喜发财，万事如意，好运如风，常伴吾身。

HTML代码：

<div class="text-animation" style="font-size:20px; font-weight: bold;">
<span>瓜</span>
<span>皮</span>
<span>之</span>
<span>牙</span>
	
<span>祝</span>
<span>大</span>	
<span>家</span>
<span>：</span>
	
<span>恭</span>
<span>喜</span>
<span>发</span>
<span>财</span>
<span>，</span>
	
<span>万</span>
<span>事</span>
<span>如</span>
<span>意</span>
<span>，</span>
	
<span>好</span>
<span>运</span>
<span>如</span>
<span>风</span>
<span>，</span>
	
<span>常</span>
<span>伴</span>
<span>吾</span>
<span>身</span>
<span>。</span>
</div>

CSS代码：

<!-------------文本内容逐字显示---------------->
<style>
.text-animation {
  overflow: hidden; /* 隐藏超出容器部分的内容 */
  white-space: nowrap; /* 设置文字不换行 */
}
/* 设置每个字的过渡效果 /
.text-animation span {
opacity: 0; / 初始状态为透明 /
animation: text-fade-in 0.1s ease-in-out forwards; / 设置动画效果和持续时间 /
letter-spacing: -0.2em; / 负值可以减小间距 */
}
/* 设置每个字的延迟显示时间 /
.text-animation span:nth-child(1) { animation-delay: 0s; }
.text-animation span:nth-child(2) { animation-delay: 0.2s; }
.text-animation span:nth-child(3) { animation-delay: 0.3s; }
.text-animation span:nth-child(4) { animation-delay: 0.4s; }
.text-animation span:nth-child(5) { animation-delay: 0.5s; }
.text-animation span:nth-child(6) { animation-delay: 0.6s; }
.text-animation span:nth-child(7) { animation-delay: 0.7s; }
.text-animation span:nth-child(8) { animation-delay: 0.8s; }
.text-animation span:nth-child(9) { animation-delay: 0.9s; }
.text-animation span:nth-child(10) { animation-delay: 1s; }
.text-animation span:nth-child(11) { animation-delay: 1.2s; }
.text-animation span:nth-child(12) { animation-delay: 1.4s; }
.text-animation span:nth-child(13) { animation-delay: 1.6s; }
.text-animation span:nth-child(14) { animation-delay: 1.8s; }
.text-animation span:nth-child(15) { animation-delay: 2s; }
.text-animation span:nth-child(16) { animation-delay: 2.2s; }
.text-animation span:nth-child(17) { animation-delay: 2.4s; }
.text-animation span:nth-child(18) { animation-delay: 2.6s; }
.text-animation span:nth-child(19) { animation-delay: 2.8s; }
.text-animation span:nth-child(20) { animation-delay: 3s; }
.text-animation span:nth-child(21) { animation-delay: 3.2s; }
.text-animation span:nth-child(22) { animation-delay: 3.4s; }
.text-animation span:nth-child(23) { animation-delay: 3.6s; }
.text-animation span:nth-child(24) { animation-delay: 3.8s; }
.text-animation span:nth-child(25) { animation-delay: 4s; }
.text-animation span:nth-child(26) { animation-delay: 4.2s; }
.text-animation span:nth-child(27) { animation-delay: 4.4s; }
.text-animation span:nth-child(28) { animation-delay: 4.6s; }
.text-animation span:nth-child(29) { animation-delay: 4.8s; }
.text-animation span:nth-child(30) { animation-delay: 4.9s; }
.text-animation span:nth-child(31) { animation-delay: 5s; }
/ 定义动画效果 */
@keyframes text-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<!-------------文本内容逐字显示---------------->

推荐动作：

逐字换行