CSS向上懸浮是指當(dāng)鼠標(biāo)移到一個(gè)元素上時(shí)，它從下向上浮動(dòng)。實(shí)現(xiàn)此效果的方法非常簡(jiǎn)單，只需使用CSS中的hover偽類和transform屬性即可：

.hover-up {
transition: transform 0.2s ease-in;
}
.hover-up:hover {
transform: translateY(-5px);
}

在上面的代碼中，transition屬性用于定義過(guò)渡效果，將元素的transform屬性值在0.2秒內(nèi)從none變?yōu)?code>translateY(-5px)（也就是把元素向上移動(dòng)5個(gè)像素）。hover偽類作用于.hover-upclass，當(dāng)鼠標(biāo)移到這個(gè)元素上時(shí)，元素便向上浮動(dòng)。

如果我們想讓元素懸浮的距離更高，只需修改translateY的值為相應(yīng)的像素?cái)?shù)即可，如：

.hover-up {
transition: transform 0.2s ease-in;
}
.hover-up:hover {
transform: translateY(-10px);
}

在這個(gè)例子中，當(dāng)鼠標(biāo)移到一個(gè).hover-upclass的元素上時(shí)，它會(huì)向上浮動(dòng)10個(gè)像素。通過(guò)這種方式，我們可以輕松地實(shí)現(xiàn)各種各樣的向上懸浮效果，為我們的網(wǎng)頁(yè)增加更多的互動(dòng)性。