在網站設計中，我們經常需要一些動態效果來吸引用戶的注意力。CSS提供了一種控制淡入效果的方法，讓我們來看看吧。

/* HTML部分 */
<div class="fade">
<p>這是一個淡入效果</p>
</div>
/* CSS部分 */
.fade {
opacity: 0; /* 初始透明度為0 */
transition: opacity 2s ease-in-out; /* 過渡效果為2秒 */
}
.fade:hover {
opacity: 1; /* 鼠標移動到該元素上時，透明度變為1，即不透明 */
}

我們先通過HTML部分創建了一個具有fade類名的div標簽，其中包含一個顯示文字的p標簽。接下來，在CSS部分，我們使用了opacity屬性來控制元素的透明度。這里將被鼠標懸停的div元素的初始透明度設置為0，也就是不可見狀態。通過設置transition屬性，可以實現透明度的漸變過渡效果，讓變化更加平緩自然。在.fade:hover偽類下，將透明度設置為1，即元素完成了淡入效果的動畫。

當然，如果需要自定義動畫的速度、時長和變化函數等屬性，還可以使用@keyframes來自定義關鍵幀動畫。不同的業務場景和需求，需要我們靈活選擇使用合適的動畫方式。