隨著網頁越來越漂亮,圖片顯示也成了頁面不可或缺的一部分。其中,圖片的移入放大效果能夠通過 CSS 代碼簡單實現,讓圖片更加生動和吸引眼球。
.myImage { width: 200px; height: 200px; transition: transform .4s; } .myImage:hover { transform: scale(1.2); }
我們來看代碼的具體實現過程,使用.myImage
類控制圖片的樣式,寬度和高度均為 200 像素。同時,我們為transition
屬性定義動畫過渡時間為 0.4 秒,這樣圖片的縮放效果看起來更加自然。
接下來,當鼠標移入圖片時,使用:hover
偽類選擇器,通過transform
屬性將圖片放大至原來的 1.2 倍,實現圖片的放大效果。
這是一種非常簡便的實現方式,可以讓你的網頁更加生動和有趣。當然,還有許多其它方式可以實現類似效果,例如 JS 等。但無論選擇哪種方式,我們都要注意避免過度使用動畫效果,以免影響頁面加載速度和用戶體驗。