在網(wǎng)站設(shè)計(jì)中，有時(shí)需要讓圖片延遲出現(xiàn)，以改善用戶體驗(yàn)。這可以通過使用CSS3的transition屬性來實(shí)現(xiàn)。 首先，在HTML中插入需要延遲出現(xiàn)的圖片，例如： ```

請等待圖片出現(xiàn)

``` 然后，在CSS中添加以下代碼： ``` .delay-image { opacity: 0; transition: opacity 2s ease-in-out; } .delay-image.show { opacity: 1; } ``` 上面的代碼將圖片的不透明度設(shè)置為0，即隱藏了圖片。然后，使用transition屬性設(shè)置動(dòng)畫的過渡時(shí)間和方式。在這個(gè)例子中，過渡時(shí)間為2秒，過渡方式為緩入緩出。 接下來，需要使用JavaScript來觸發(fā)動(dòng)畫。可以在頁面加載完成后，使用以下代碼： ``` window.onload = function() { var img = document.querySelector('.delay-image'); img.classList.add('show'); } ``` 當(dāng)頁面加載完成后，使用JS獲取圖片，然后將其類名修改為show，這樣就可以觸發(fā)CSS動(dòng)畫，逐漸顯示出圖片。 最后，請不要忘記在CSS中添加瀏覽器前綴以確保兼容性。完整代碼如下： ```

請等待圖片出現(xiàn)

.delay-image { opacity: 0; transition: opacity 2s ease-in-out; -webkit-transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -ms-transition: opacity 2s ease-in-out; -o-transition: opacity 2s ease-in-out; } .delay-image.show { opacity: 1; } window.onload = function() { var img = document.querySelector('.delay-image'); img.classList.add('show'); } ```