在網(wǎng)頁(yè)設(shè)計(jì)中，文字淡出是一種非常常見的效果。通過(guò)逐漸透明化文字的方式，可以讓網(wǎng)頁(yè)顯得更為高級(jí)和流暢。而在HTML中，文字淡入淡出效果的實(shí)現(xiàn)主要是借助CSS代碼來(lái)完成。下面是一份HTML代碼的實(shí)例：
<!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>上面這段代碼中，我們首先定義了一個(gè)id為“text”的文字，其opacity屬性被設(shè)置為1，也就是完全不透明。接著我們利用CSS的transition屬性定義了這個(gè)文字在2秒鐘內(nèi)透明化的過(guò)渡時(shí)間，使用了“ease-in-out”緩動(dòng)函數(shù)，讓過(guò)渡效果更加柔和。
在按鈕點(diǎn)擊之后，我們利用JavaScript代碼通過(guò)getElementById()函數(shù)獲取到id為“text”的元素，再調(diào)用classList對(duì)象的toggle()方法來(lái)切換它的“fade”類。這個(gè)fade類將使得我們定義的opacity屬性變?yōu)?，文字逐漸淡出，完成了文字淡出效果的實(shí)現(xiàn)。
上一篇html 引用 vue