CSS上下漂浮動畫是一種常見的網(wǎng)頁動效，它可以讓頁面看起來更加生動、有趣。本文將介紹如何使用CSS實(shí)現(xiàn)上下漂浮動畫效果。

/* CSS代碼 */
.float{
animation: float 3s ease-in-out infinite;
}
@keyframes float{
from{transform: translateY(0)}
50%{transform: translateY(-15px)}
to{transform: translateY(0)}
}

我們定義了一個(gè)名為float的class，同時(shí)給它添加了上下漂浮動畫。這個(gè)動畫的時(shí)長是3秒，緩動函數(shù)為ease-in-out，無限循環(huán)。

接著定義了一個(gè)名為float的關(guān)鍵幀動畫。在開始時(shí)，我們將元素的位置設(shè)為原始位置（即 translateY(0)）。在50%的時(shí)候，將元素向上移動15像素（即 translateY(-15px)）。到動畫結(jié)束時(shí)，將元素恢復(fù)到原位，即 translateY(0)。

為了讓多個(gè)不同元素同時(shí)應(yīng)用上下漂浮動畫，我們可以給它們添加相同的class名（如上述float），或者使用繼承等方式達(dá)到同樣的效果。

在實(shí)際應(yīng)用中，我們可以根據(jù)自己的需求修改動畫的參數(shù)，如時(shí)長、緩動函數(shù)、移動距離等，以達(dá)到更好的視覺效果。