在網站開發中，我們經常會遇到圖片未加載的情況。這時候，我們可以使用CSS來給這些圖片添加動畫，以讓用戶在等待圖片加載的過程中得到一些反饋。

以下是一段CSS代碼，它可以讓未加載圖片出現漸變效果：

img {
opacity: 0;
transition: opacity 300ms ease-in-out;
}
img.loaded {
opacity: 1;
}

讓我們來解釋一下上述代碼：

• 首先，我們設置所有圖片的opacity為0，使其完全透明。
• 然后，我們為所有圖片添加了一個transition屬性，表示圖片的opacity屬性在300毫秒內發生變化，這個變化是以ease-in-out的方式進行的。
• 最后，我們給那些已經加載完畢的圖片添加了一個.loaded類，這個類的作用是將圖片的opacity屬性設置為1，從而實現圖片逐漸出現的效果。

需要注意的是，為了讓這段CSS代碼生效，我們還需要使用JavaScript來檢測圖片是否已經加載完畢，并在加載完畢后將.loaded類添加到圖片的class屬性中：

var images = document.querySelectorAll('img');
function loadImage(img) {
img.classList.add('loaded');
}
for (var i = 0; i < images.length; i++) {
if (images[i].complete) {
loadImage(images[i]);
} else {
images[i].addEventListener('load', function() {
loadImage(this);
});
}
}

上述JavaScript代碼首先選取了所有的圖片，然后遍歷了這些圖片，如果圖片已經加載完成，就直接調用loadImage函數，將.loaded類添加到圖片的class屬性中。如果圖片未加載完成，就為圖片添加一個load事件，當圖片加載完成時，就調用loadImage函數，同樣是將.loaded類添加到圖片的class屬性中。

通過上述CSS和JavaScript代碼，我們可以讓未加載圖片出現漸變效果，讓用戶在等待圖片加載的過程中得到一些反饋，提高用戶體驗。