CSS3的特性讓我們實(shí)現(xiàn)了許多有趣的效果，其中包括div漂浮。漂浮可以讓頁面更加生動，可以設(shè)置漂浮的速度、方向、大小等等，下面讓我們一起來看看實(shí)現(xiàn)方法。

/* 定義漂浮動畫 */
@keyframes floating {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translateY(0px);
}
}
/* 定義漂浮樣式 */
.floating-div {
animation: floating 2s ease-in-out infinite;
}

首先，我們需要定義一個漂浮動畫，使用@keyframes關(guān)鍵詞，在0%和100%處定義漂浮的初始和結(jié)束狀態(tài)，在50%處定義漂浮的最高點(diǎn)。在動畫結(jié)束后，元素會返回到初始狀態(tài)。

接著，定義漂浮樣式的CSS類，使用animation屬性，將動畫名、時間和循環(huán)次數(shù)設(shè)置為參數(shù)。這里我們將動畫和元素的樣式分離，可以重復(fù)使用。

<div class="floating-div">This is a floating div.</div>

最后，在HTML中使用定義的樣式類，在需要漂浮的div元素上添加floating-div樣式。此時，這個div元素就會在頁面上漂浮起來。

在實(shí)際開發(fā)中，我們可以在導(dǎo)航欄、輪播圖、彈窗等各種場景中使用漂浮效果，增加頁面的動態(tài)性和趣味性。