HTML 文字動畫是當前網頁設計中的一個不可或缺的元素。通過在 HTML 中添加動畫，可以為網頁增添更多的活力和趣味性，讓用戶更加愉悅地瀏覽網頁。下面，我們將為大家介紹一些實現 HTML 文字動畫的代碼。
<!DOCTYPE html>
<html>
<head>
<title>HTML 文字動畫</title>
</head>
<body>
<h1 id="animate-text">Welcome to our website!</h1>
<script>
var text = document.getElementById("animate-text");
var textString = text.innerHTML;
text.innerHTML = "";
for(var i = 0; i < textString.length; i++){
text.innerHTML += "<span>" + textString.charAt(i) + "</span>";
}
var time = 0;
setInterval(function(){
var span = text.querySelectorAll("span")[time];
span.style.opacity = 1;
time++;
if(time === textString.length){
clearInterval(interval);
return;
}
}, 200);
</script>
</body>
</html>上面的代碼實現了一個簡單的文字逐個淡入的動畫效果。首先，我們通過 JavaScript 獲取到對應的文本元素，并將其內容分割成單個的字符，然后通過循環遍歷每一個字符，為每一個字符都添加一個 span 標簽，最后分別設置每個字符的透明度為 0。接下來，我們使用定時器 setInterval() 方法來逐步將每個字符的透明度調高，直到全部顯示完畢。通過這種方式，我們實現了一個簡單的文字動畫效果。
上一篇html 轉 vue
下一篇bcb json