CSS圖標(biāo)可以讓網(wǎng)頁看起來更加美觀，但是如果想要讓圖標(biāo)更加生動，那么可以考慮使用鼠標(biāo)懸停變色的效果。
.icon{
color: #333;
font-size: 24px;
transition: color 0.3s ease;
}
.icon:hover{
color: #ff0000;
}上面的代碼中，我們定義了一個.icon類，用來設(shè)置圖標(biāo)的樣式，包括字體大小和顏色。然后使用transition屬性來設(shè)置顏色變化的過渡效果，使得變化更加平滑自然。當(dāng)鼠標(biāo)懸停在.icon元素上時，使用:hover偽類來設(shè)置鼠標(biāo)變色的效果。
在HTML中，只需要引入CSS文件，并在需要使用圖標(biāo)的地方添加一個包含.icon類的元素即可：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p><i class="icon fa fa-star"></i> 點(diǎn)贊</p> </body> </html>
上面的代碼中，我們使用了Font Awesome庫中的一個星形圖標(biāo)，添加到了一個p元素中，并在i元素中設(shè)置了.icon和fa fa-star類，其中fa fa-star類用來設(shè)置星形圖標(biāo)的樣式。
這樣設(shè)置之后，當(dāng)鼠標(biāo)懸停在星形圖標(biāo)上時，就會變?yōu)榧t色，起到了一個更加生動的效果。