CSS能夠實現許多不同的效果,其中之一就是圖片放大。通過使用CSS的transform屬性,可以讓圖片在鼠標懸停時放大。
img:hover { transform: scale(1.2); }
上面的代碼表示在鼠標懸停在圖片上時,將該圖片放大120%。可以根據需要調整transform的值來改變放大的程度。
另外,還可以添加transition屬性來控制過渡效果的速度,讓圖片放大時更加平滑。
img { transition: transform 0.2s ease-in-out; }
上面的代碼表示在鼠標懸停時,transform屬性的變化將會在0.2秒內完成,并且采用ease-in-out的緩動效果。
除此之外,還可以添加一些其他的樣式來美化圖片放大的效果,比如設置陰影、邊框等。總之,通過使用CSS可以很容易地實現圖片的放大效果,提升網頁的體驗感。
上一篇css實現斑馬條紋背景
下一篇div 中劃線