CSS中hover圖片放大是一種常見的效果,主要用于給用戶更好的交互體驗。下面是一些示例代碼,可以幫助您實現這種效果:
/*示例1*/ img:hover { transform: scale(1.2); transition: all 0.5s ease-in-out; } /*示例2*/ img:hover { width: 120%; height: 120%; transition: all 0.5s ease-in-out; } /*示例3*/ img:hover { transform: translate(10%, 10%); transition: all 0.5s ease-in-out; }
這些示例代碼中,都是使用:hover偽類來控制鼠標懸停時圖片的樣式。其中,transform屬性可以控制圖片進行旋轉、大小調整、平移等操作。transition屬性用于制定圖片在變化時的過渡效果。
需要注意的是,不同的瀏覽器對于這些效果的支持情況可能會有所差異。因此,在使用這些效果時,最好進行兼容性測試以確保它們正確運行。