CSS圖片隱藏幾秒后出現(xiàn)，是一種很常見的效果。通過這種技巧，我們可以讓圖片在頁面滾動或加載時，讓它們看起來更加有序美觀。

實現(xiàn)這種效果的主要方法是利用CSS中的opacity屬性和transition屬性。我們可以通過CSS選擇器來指定圖片的class或id，在其內(nèi)部設(shè)置opacity為0，再利用transition的動畫效果，讓它們在經(jīng)過幾秒鐘的時間后逐漸變?yōu)椴煌该鳌?/p>

.my-image {
opacity: 0;
transition: opacity 2s;
}
.my-image.show {
opacity: 1;
}

在上面的代碼片段中，我們首先定義了一個名為.my-image的class，將其中的opacity設(shè)為0，表示初始時圖片是透明的。然后在.my-image.show這個class中，我們將opacity設(shè)置為1，表示圖片顯示出來時應(yīng)該是不透明的。這里的.show是一個自定義的class，我們可以通過JavaScript等手段在需要顯示圖片的時候動態(tài)地為圖片添加這個class，從而呈現(xiàn)出效果。

除了opacity和transition屬性之外，我們還可以利用CSS3中的animation屬性來實現(xiàn)這個效果。下面是相關(guān)的代碼：

.my-image {
animation: fadeIn 2s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

在這個代碼片段中，我們使用了@keyframes關(guān)鍵字來定義了一個名為fadeIn的動畫。這個動畫從opacity為0開始，逐漸變?yōu)閛pacity為1。在.my-image這個class中，我們使用animation屬性來將動畫應(yīng)用到圖片上，并將animation-fill-mode設(shè)置為forwards，表示讓動畫結(jié)束時保留最后一幀的狀態(tài)，也就是透明度為1的狀態(tài)，這樣就可以讓圖片一直保持顯示狀態(tài)了。