CSS3中,可以使用scale屬性來實現圖片訪問時變大的功能。
img:hover{ transform:scale(1.2); /*鼠標懸停時圖片變大*/ }
在上面的代碼中,我們使用了:hover偽類來表示鼠標懸停在圖片上時的狀態。然后,將transform屬性的值設置為scale(1.2),表示將圖片的大小放大到原來的1.2倍。
需要注意的是,在使用scale時,圖片的位置也會發生變化。如果不希望圖片位置發生變化,可以使用transform-origin屬性來指定圖片縮放中心。
img:hover{ transform:scale(1.2); /*鼠標懸停時圖片變大*/ transform-origin:center center; /*指定縮放點為中心*/ }
除了使用:hover偽類外,還可以在其他狀態下使用scale屬性,如:active、visited等。如果需要將大小變化變得平滑,可以使用transition屬性來實現:
img{ transition: transform 0.2s ease-in; /*設置變化時間和動畫效果*/ } img:hover{ transform: scale(1.2); }
在上面的代碼中,我們將transition屬性的值設置為transform 0.2s ease-in,表示對transform屬性進行0.2秒的緩動動畫。
綜上所述,使用CSS3的scale屬性可以實現圖片訪問變大的效果,并可以通過transform-origin屬性指定縮放中心,使用transition屬性實現平滑變化。
上一篇css3 圓放大動畫效果
下一篇css3 圖片置灰