淡入文本(Fade-in Text)是一种网页设计效果,通过逐渐增加文本的透明度来实现文本的显示。这种效果可以吸引用户的注意力,提升用户体验。
以下是一个使用JavaScript实现逐词淡入效果的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade-in Text</title>
<style>
.fade-in {
opacity: 0;
transition: opacity 1s ease-in-out;
}
</style>
</head>
<body>
<div id="text-container">
<span class="fade-in">这是一个</span>
<span class="fade-in">逐词淡入</span>
<span class="fade-in">的示例</span>
</div>
<script>
function fadeInText(containerId) {
const container = document.getElementById(containerId);
const elements = container.getElementsByClassName('fade-in');
let index = 0;
function fadeInNext() {
if (index < elements.length) {
elements[index].style.opacity = 1;
index++;
setTimeout(fadeInNext, 1000); // 每秒淡入一个单词
}
}
fadeInNext();
}
window.onload = function() {
fadeInText('text-container');
};
</script>
</body>
</html>
<span>
)中。通过以上方法,你可以实现一个div内逐词淡入的效果,而不是多个div。
领取专属 10元无门槛券
手把手带您无忧上云