CSS3提供了一種非??岬男Ч簣D片的漸入漸出。這種效果能夠為網站或者應用程序添加更多的動態感,提高用戶體驗。接下來我們一步步了解CSS3圖片漸入漸出的實現過程。
/* 首先,我們先在CSS文件中添加以下代碼 */ img{ opacity: 0; transition: opacity 1s; } /* 這個代碼片段意味著:圖片默認不顯示。但是,在鼠標懸浮于圖片上的時候,圖片會慢慢變成不透明的,總共需要1秒鐘的時間。 */ img:hover{ opacity: 1; } /* 這段代碼表示:當鼠標懸浮于圖片上方時,圖片慢慢地變成不透明。當鼠標從圖片移開后,圖片再次變成透明。 */
這樣,我們就成功實現了CSS3圖片的漸入漸出效果。這個效果可以應用于產品頁面上,留下良好的用戶體驗。
上一篇css logo 響應
下一篇css l兩行顯示