在CSS中,我們可以使用:hover偽類選擇器來控制鼠標放上去時的效果。而當我們想要讓圖片在鼠標放上去時變近時,我們可以使用transform屬性進行控制。
img:hover { transform: scale(1.1); }
在上面的代碼中,我們為圖片元素添加了:hover偽類選擇器,并使用了transform: scale()屬性。其中,scale()函數接受一個參數,用于指定圖片的縮放比例。當我們將這個參數設置為1.1時,圖片在鼠標放上去時會變成原來的1.1倍大小。
如果我們想要讓圖片縮放時有更加平滑的效果,我們可以使用transition屬性進行控制。
img { transition: transform 0.3s ease-in-out; } img:hover { transform: scale(1.1); }
在上面的代碼中,我們為圖片元素添加了transition屬性。這個屬性用于指定屬性變化的過渡效果。其中,第一個參數指定了要進行過渡的屬性,第二個參數指定了過渡的時間,第三個參數指定了過渡的緩動效果。在這里,我們將transform屬性進行了過渡,并指定了一個相對較短的時間0.3s來實現平滑的效果。
通過使用:hover偽類選擇器和transform屬性,我們可以很方便地實現鼠標放上去圖片變近的效果。而使用transition屬性,則可以讓變化效果更加平滑,為用戶帶來更好的視覺體驗。