CSS3作為前端開發中的重要技術之一，可以實現很多炫酷的效果，其中鼠標移入移出效果也是非常常見的。下面我們來介紹一下如何通過CSS3實現鼠標移入移出效果。

/* 鼠標移入 */
.element:hover {
/* 設置元素鼠標移入時的樣式 */
}
/* 鼠標移出 */
.element {
/* 設置元素默認狀態下的樣式 */
/* 鼠標移入時的樣式需要在:hover中進行設置 */
}

在上面的代碼中，我們使用:hover選擇器來設置鼠標移入時的樣式。需要注意的是，在設置鼠標移入時的樣式時，我們需要使用:hover選擇器，而在設置鼠標移出時的樣式時，則不需要使用任何選擇器，直接在元素選擇器下設置即可。

下面我們來介紹一些常見的鼠標移入移出效果。

圖片放大效果

img:hover {
transform: scale(1.1); /* 鼠標移入時放大1.1倍 */
transition: transform .3s ease; /* 添加過渡效果，時間為0.3s */
}
img {
transition: transform .3s ease; /* 默認狀態下也需要添加過渡效果 */
}

按鈕背景色變化效果

.button:hover {
background-color: #ff0000; /* 鼠標移入時背景色變為紅色 */
color: #ffffff; /* 文字顏色變為白色 */
}
.button {
background-color: #ffffff; /* 默認狀態下背景色為白色 */
color: #000000; /* 文字顏色為黑色 */
}

文字陰影效果

.text:hover {
text-shadow: 2px 2px 5px #000000; /* 鼠標移入時添加文字陰影 */
}
.text {
text-shadow: none; /* 默認狀態下沒有文字陰影 */
}

通過以上示例，我們可以看到使用CSS3實現鼠標移入移出效果非常簡單。需要注意的是，在設置鼠標移入時的樣式時，我們需要使用:hover選擇器，并添加過渡效果來使效果更加平滑。