CSS中的圖片放大縮小功能可以通過transform屬性實現(xiàn)。
下面是一個示例的CSS代碼,可以讓圖片在鼠標懸停時放大,懸停結束后恢復原始大小:
img:hover { transform: scale(1.2); }
這段代碼會給所有圖片添加一個:hover偽類,表示在鼠標懸停時應用下面的CSS樣式。其中,transform屬性指定了放大的比例,這里是1.2,表示將圖片的大小放大到原始大小的1.2倍。
如果要同時在X和Y方向放大,可以這樣修改代碼:
img:hover { transform: scale(1.2, 1.2); }
這里的scale屬性接受兩個參數(shù),分別表示在X和Y方向上的縮放比例。如果只想在一個方向上放大,可以將另一個參數(shù)設置為1。
如果要在懸停結束時平滑地恢復到原始大小,可以添加一個transition屬性:
img { transition: transform 0.3s ease; } img:hover { transform: scale(1.2); }
這里的transition屬性指定了在0.3秒的時間內平滑地過渡transform屬性,緩動函數(shù)是ease,即慢入慢出效果。