鼠標懸浮圖片放大,是一種常見的網頁交互效果,讓用戶可以更加清楚地看到圖片的細節。這種效果使用CSS3中的transform和transition屬性可以很容易地實現。
首先,我們需要一個包含圖片的HTML元素,可以是div、a標簽等等,這里以img標簽為例:
<img src="example.jpg" class="enlarge-on-hover">
接下來,在CSS文件中定義.enlarge-on-hover類,使其懸浮在上方時放大,離開時恢復原樣:
.enlarge-on-hover { transition: transform 0.2s ease-in-out; } .enlarge-on-hover:hover { transform: scale(1.5); }
這里我們先定義了transition屬性,告訴瀏覽器在變換大小時要進行動畫,時間為0.2秒,變換方式為ease-in-out。
接下來在:hover偽類下,定義transform屬性使圖片放大,scale(1.5)表示把原來的大小放大1.5倍。
在實際使用中,可以根據需要根據上述代碼進行修改,比如加入陰影效果,或是改變大小的倍率等等,以實現更好的交互體驗。
上一篇css516518