在CSS中,可以使用:hover偽類來實(shí)現(xiàn)鼠標(biāo)懸停時(shí)圖片變亮的效果,以下是一個(gè)簡單的示例:
HTML代碼:
<img class="image" src="image.jpg" alt="Image">
CSS代碼:
.image { filter: brightness(100%); /* 默認(rèn)值 */ transition: filter 0.3s ease; /* 過渡效果 */ } .image:hover { filter: brightness(200%); /* 鼠標(biāo)懸停時(shí)亮度增加 */ }
在這個(gè)示例中,圖片默認(rèn)亮度為100%,當(dāng)鼠標(biāo)懸停在圖片上時(shí),亮度會(huì)增加到200%,通過過渡效果實(shí)現(xiàn)平滑的亮度變化。
你可以根據(jù)需要調(diào)整filter函數(shù)的參數(shù)來控制圖片的亮度,也可以添加其他CSS樣式來優(yōu)化圖片的外觀和布局。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。