CSS鼠標(biāo)劃過(guò)圖標(biāo)變大

在網(wǎng)站、應(yīng)用程序或其他數(shù)字平臺(tái)中，常常需要使用圖標(biāo)來(lái)幫助用戶(hù)識(shí)別不同的操作或功能。

當(dāng)用戶(hù)鼠標(biāo)滑過(guò)圖標(biāo)時(shí)，它會(huì)變得更大以提高用戶(hù)的注意力并傳達(dá)更多的信息。

在CSS中，我們可以使用:hover選擇器將其與鼠標(biāo)懸停樣式相結(jié)合。在下面的CSS代碼段中，我們首先設(shè)置了初始大小和背景圖像，然后使用轉(zhuǎn)換和過(guò)渡屬性將圖標(biāo)變大和動(dòng)畫(huà)效果更平滑。

.icon {
	width: 50px;
	height: 50px;
	background-image: url('icon.png');
	background-size: 50px;
	transition: all 0.3s ease-in-out;
}
.icon:hover {
	transform: scale(1.2);
}