眾所周知，CSS是一種用于網頁排版和美化的語言。而在其中，有一個酷炫的效果叫做“淡出”，可以讓文字逐漸消失至無影無蹤。那么，我們來看看如何實現CSS淡出單詞。

/* 點擊按鈕后文字逐漸消失 */
button {
border: none;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
}
.fade-out {
opacity: 1;
transition: opacity 1s ease;
}
.fade-out:hover {
opacity: 0;
}

上述代碼中，我們通過給文本添加.fade-out類，實現了當鼠標懸浮在它上面時，文本逐漸消失的效果。其中，通過設置opacity屬性，我們讓文本的透明度從1（完全不透明）到0（完全透明），實現了淡出效果。而通過使用transition屬性，我們使這個過程自然地、平滑地進行。

此外，我們還添加了一個按鈕，當點擊它時，會觸發同樣的淡出效果。這通過JS實現，代碼如下：

// 點擊按鈕時觸發淡出效果
const button = document.querySelector('button');
const text = document.querySelector('.text');
button.addEventListener('click', ()=>{
text.classList.add('fade-out');
});

在這段代碼中，我們通過querySelector方法獲取了按鈕和需要淡出的文本，通過監聽按鈕的click事件，添加.fade-out類，使文本逐漸消失。

以上就是CSS淡出單詞的實現方法。通過簡單的CSS和JS代碼，我們就可以為網頁添加生動的動態效果。相信在今后的學習和實踐中，我們還會接觸更多有趣的特效。