CSS鼠標劃過圖標變大

在網站、應用程序或其他數字平臺中，常常需要使用圖標來幫助用戶識別不同的操作或功能。

當用戶鼠標滑過圖標時，它會變得更大以提高用戶的注意力并傳達更多的信息。

在CSS中，我們可以使用:hover選擇器將其與鼠標懸停樣式相結合。在下面的CSS代碼段中，我們首先設置了初始大小和背景圖像，然后使用轉換和過渡屬性將圖標變大和動畫效果更平滑。

.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);
}