CSS淡入淡出是一種能夠讓網頁看起來更加生動的特效。它可以使網頁元素從透明變成不透明，或者從不透明變成透明，產生一種漸變的效果。

我們可以使用CSS3中的transition和opacity屬性來實現淡入淡出效果。其中，transition屬性用于設置CSS樣式變換時的參數，而opacity屬性用于設置元素的透明度。

.fade-in-out {
opacity: 0;
transition: opacity .5s ease-in-out;
}
.fade-in-out:hover {
opacity: 1;
}

上述代碼中，我們先將.fade-in-out元素的初始透明度設置為0，然后設置一個過渡效果，表示在0.5秒內由透明度0過渡到透明度1。當鼠標移動到元素上時，由于:hover偽類的作用，元素的透明度將變為1，就實現了淡入的效果。

同理，在鼠標移開元素時，我們只需要將:hover偽類去掉，元素的透明度又會逐漸變為0，實現淡出的效果。

.fade-in-out {
opacity: 1;
transition: opacity .5s ease-in-out;
}
.fade-in-out:hover {
opacity: 0;
}

通過這種方式，我們可以輕松實現CSS淡入淡出效果，讓網頁元素更加生動有趣，提升用戶體驗。