在CSS3中,我們可以使用:hover偽類實現鼠標滑過時圖片變大的效果。
img:hover { transform: scale(1.2); }
上述代碼中,我們使用了transform屬性的scale函數,將圖片的大小增大了20%。
除了使用scale函數,我們還可以使用box-shadow屬性實現圖片變大的效果,代碼如下:
img:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
上述代碼中,我們使用了box-shadow屬性的模糊效果,使圖片周圍出現一個漸變的陰影,從而實現了圖片變大的效果。
除了上述兩種方法,我們還可以使用transition屬性,使圖片在鼠標移過時緩慢變化大小,代碼如下:
img { transition: transform 0.5s ease; } img:hover { transform: scale(1.2); }
上述代碼中,我們使用了transition屬性的ease函數,使圖片變化過程更加平滑。
綜上所述,我們可以使用以上幾種方法實現鼠標滑過時圖片變大的效果,使網頁更加生動有趣。