用css+原生js实现一个逐字出现的效果好的,以下是一个简单的实现文字逐个透明度从0到1的动画
时间: 2024-03-21 09:44:21 浏览: 19
可以使用以下代码实现逐字出现的效果:
HTML:
```
<div id="text-container">
<p id="text">Hello, World!</p>
</div>
```
CSS:
```
#text {
opacity: 0;
}
#text.active {
animation: reveal-text 1s ease forwards;
}
@keyframes reveal-text {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
```
JS:
```
const text = document.getElementById("text");
const letters = text.textContent.split("");
text.textContent = "";
for (let i = 0; i < letters.length; i++) {
text.innerHTML += "<span>" + letters[i] + "</span>";
}
const spans = text.querySelectorAll("span");
let index = 0;
function showLetter() {
spans[index].classList.add("active");
index++;
if (index === spans.length) {
clearInterval(timer);
timer = null;
return;
}
}
let timer = setInterval(showLetter, 100);
```
这段代码将文字分割成单个字母,然后使用一个定时器逐个添加样式类,使字母逐渐出现。