CSS中有許多屬性可用于改變圖片的大小和外觀。其中一個有趣的屬性是“transform: scale()”。
img:hover { transform: scale(1.2); }
這個屬性可以將圖像原來的大小擴展一定比例,具有增強視覺效果的作用。以上示例中,當鼠標懸停在圖片上時,圖像將放大20%。
“transform: scale()”還有其他的用法。您可以使用負數將圖片縮小,如“transform: scale(0.8)”可以將圖像縮小20%。
img:active { transform: scale(0.8); }
您還可以添加其他轉換屬性來創造更復雜的動畫效果,如旋轉和傾斜。例如,使用“transform: rotate()”可以使圖像以角度旋轉。
img:hover { transform: rotate(45deg); }
通過在圖片上使用這些轉換屬性,您可以創造出具有吸引力和動態感的網站設計。
下一篇VUE把代碼文件