CSS3是一種強大的樣式表語言,它可以被用來給HTML網頁添加各種各樣的視覺效果。其中一個最常見的應用是在網頁中添加圖片。在一些情況下,我們希望在用戶訪問網頁后一段時間,才顯示圖片。這時候,我們可以使用CSS3的animation屬性。
img { opacity: 0; animation: fadeIn 2s ease-in 1s forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
代碼解釋:
首先,在img標簽中設置opacity為0,這樣就將圖片隱藏起來了。然后,使用animation屬性來定義一個動畫。
其中,fadeIn是動畫的名稱,2s表示動畫的持續時間,ease-in表示動畫漸變地開始,1s表示動畫在頁面加載后延遲1秒開始執行,forwards表示動畫執行結束后保持在最后一個關鍵幀的狀態。
在CSS3中,可以使用@keyframes關鍵字定義動畫的關鍵幀。在這個例子中,動畫的開始狀態是透明的(opacity=0),結束狀態是完全不透明的(opacity=1)。
這樣,在用戶訪問網頁后1秒鐘,圖片就可以開始以動畫的方式逐漸顯現了。
上一篇css3 變小手