在網頁設計中，我們經常需要使用圖片，并且這些圖片有時候需要通過動畫效果來逐漸顯示。使用CSS來實現這樣的動畫效果非常方便和靈活。
img{
opacity: 0; /*設置圖像透明度為0，即不可見*/
transition: opacity 1s ease-in-out; /*設置透明度變化的動畫*/
}
img.fade-in{
opacity: 1; /*將透明度設為1，圖片逐漸顯示*/
}上面的代碼使用opacity屬性來設置圖片的透明度，將其設為0，這樣圖片將不可見。然后使用CSS3的transition屬性來實現透明度的變化，這里的動畫效果是1秒鐘內緩慢地從不可見變成可見，即ease-in-out。當我們需要顯示圖片時，只需要為其添加一個名為fade-in的class，這個class會將圖片的透明度設為1，使其逐漸顯示出來。
下面是一個完整的例子：
<!DOCTYPE html> <html> <head> <title>CSS動畫圖片逐漸顯示</title> </head> <body> <img class="fade-in" src="example.jpg"> </body> </html>
在這個例子中，我們只需要在圖片的class屬性中添加fade-in即可實現圖片逐漸顯示的動畫效果。
上一篇css動畫實現透明度效果
下一篇mysql數據庫面試講解