CSS3中有很多炫酷的特效，其中上下漂浮效果常被運用在網(wǎng)頁中，本文將介紹如何使用CSS3實現(xiàn)上下漂浮效果。

上浮效果：
代碼如下：
.float-up {
animation: float-up 2s ease-in-out infinite;
}
@keyframes float-up {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
注釋：設置一個名稱為float-up的動畫，持續(xù)時間為2秒，緩動效果為先慢后快再慢。在動畫過程中，對象不斷地向上移動10px，達到浮動的效果。
下降效果：
代碼如下：
.float-down {
animation: float-down 2s ease-in-out infinite;
}
@keyframes float-down {
0% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
注釋：設置一個名稱為float-down的動畫，持續(xù)時間為2秒，緩動效果為先慢后快再慢。在動畫過程中，對象不斷地向下移動10px，達到浮動的效果。
總結(jié)：
上下漂浮效果是CSS3中常見的動畫效果之一，需要運用transform屬性和animation屬性來實現(xiàn)。通過設置關鍵幀實現(xiàn)對象的移動，使其在頁面中浮動，增加了動感和活力，使頁面更加生動活潑。