CSS3是Web前端設計的重要組成部分，它提供了強大的動畫效果，其中懸停動畫是一種非常受歡迎的特效，可以吸引用戶的注意力，增強網(wǎng)站交互性。下面我們來介紹幾種常用的CSS3懸停動畫效果。

/* 1. 圖片透明度變化 */
img {
transition: opacity 0.5s ease-in-out; /* 設置透明度過渡效果 */
}
img:hover {
opacity: 0.7; /* 圖片透明度變?yōu)?.7 */
}
/* 2. 文字放大縮小 */
h1, h2, h3 {
transition: font-size 0.3s ease; /* 文字大小過渡效果 */
}
h1:hover, h2:hover, h3:hover {
font-size: 1.2em; /* 文字放大到1.2倍 */
}
/* 3. 鼠標懸停時，邊框變色 */
button {
border: 2px solid #000;
transition: border-color 0.2s ease;
}
button:hover {
border-color: #f00; /* 邊框變?yōu)榧t色 */
}
/* 4. 背景顏色漏斗 */
div {
background: linear-gradient(to bottom, #f00 50%, #fff 50%);
background-size: 100% 200%; /* 設置背景顏色大小 */
transition: background-position 0.5s ease;
}
div:hover {
background-position: 0 -100%; /* 背景顏色變?yōu)榧t色 */
}

通過以上CSS3代碼，我們可以實現(xiàn)不同的懸停動畫效果，可以根據(jù)具體的設計需求進行調(diào)整和修改，創(chuàng)造出更加優(yōu)美的界面設計。