CSS3是一種用于網頁設計的樣式表語言。它不僅可以控制網頁中的文本樣式,還可以實現圖片等元素的各種動畫效果。其中,圖片懸停特效是一種非常炫酷的效果,可以為網頁增添一份美感。
img:hover{ -webkit-transform: scale(1.1); /* 圖片變大 */ transform: scale(1.1); opacity: 0.8; /* 透明度變為0.8 */ }
上述代碼使用:hover選擇器,表示當鼠標懸停在圖片上方時,執行下面的CSS代碼。其中,-webkit-transform屬性和transform屬性可以讓圖片在懸停時變大,-webkit是Webkit內核瀏覽器的私有屬性,通常只用于Safari和Chrome等瀏覽器;opacity屬性可以改變透明度,這里將透明度降低為0.8,讓圖片看起來更加柔和。
需要注意的是,這種效果并不適用于所有類型的圖片。有些圖片過于復雜或過于小,可能會影響用戶體驗,甚至會降低網站的性能。因此,在使用圖片懸停特效時,需要根據具體情況來決定是否使用,以達到最佳的效果。
上一篇css logo 代碼
下一篇css maigin屬性