在網頁設計中，文字淡出是一種非常常見的效果。通過逐漸透明化文字的方式，可以讓網頁顯得更為高級和流暢。而在HTML中，文字淡入淡出效果的實現主要是借助CSS代碼來完成。下面是一份HTML代碼的實例：
<!DOCTYPE html>
<html>
<head>
<title>HTML文字淡入淡出效果</title>
<style>
#text {
opacity: 1;
transition: opacity 2s ease-in-out;
}
#text.fade {
opacity: 0;
}
</style>
</head>
<body>
<h1 id="text">Hello, World!</h1>
<button onclick="document.getElementById('text').classList.toggle('fade')">Fade Out</button>
</body>
</html>上面這段代碼中，我們首先定義了一個id為“text”的文字，其opacity屬性被設置為1，也就是完全不透明。接著我們利用CSS的transition屬性定義了這個文字在2秒鐘內透明化的過渡時間，使用了“ease-in-out”緩動函數，讓過渡效果更加柔和。
在按鈕點擊之后，我們利用JavaScript代碼通過getElementById()函數獲取到id為“text”的元素，再調用classList對象的toggle()方法來切換它的“fade”類。這個fade類將使得我們定義的opacity屬性變為0，文字逐漸淡出，完成了文字淡出效果的實現。
上一篇html 引用 vue
下一篇css3數量加減