CSS3提供了多種方式來實現(xiàn)鼠標(biāo)移開時的效果，可以通過選擇器和動畫屬性來實現(xiàn)。這里我們介紹幾種常見的鼠標(biāo)離開方式。

1. 切換類名

通過使用:hover和:not等選擇器的組合，可以在鼠標(biāo)移入時添加類名，鼠標(biāo)移開時移除類名，從而實現(xiàn)效果。

.box{
width: 100px;
height: 100px;
background-color: green;
transition: all .3s ease;
}
.box:hover{
transform: scale(1.2);
}

2. 使用transition

可以使用transition屬性來為元素添加動畫效果，在鼠標(biāo)移開時觸發(fā)動畫。例如下面的代碼，當(dāng)鼠標(biāo)移開時，元素會慢慢變回原來的大小。

.box{
width: 100px;
height: 100px;
background-color: green;
transition: all .3s ease;
}
.box:hover{
transform: scale(1.2);
}
.box:hover{
transform: scale(1);
}

3. 使用animation

也可以使用animation屬性來定義動畫，一下代碼為例，當(dāng)鼠標(biāo)移開時，元素會向下平移一定距離。

.box{
width: 100px;
height: 100px;
background-color: green;
animation: move 1s;
}
.box:hover{
animation: move-back 1s;
}
@keyframes move{
0%{
transform: translateY(0);
}
100%{
transform: translateY(50px);
}
}
@keyframes move-back{
0%{
transform: translateY(50px);
}
100%{
transform: translateY(0);
}
}

總之，CSS3提供了豐富的鼠標(biāo)離開方式來實現(xiàn)更生動的網(wǎng)頁效果，開發(fā)者們可以根據(jù)項目需要靈活運用。