要實現一個上下懸浮的特效，可以使用CSS的@keyframes規則和動畫屬性。以下是一個簡單的示例：

代碼示例

/* 定義一個名為floating的動畫 */
@keyframes floating {0% {transform: translateY(0); /* 初始位置 */}50% {transform: translateY(-4px); /* 向上移動4像素 */}100% {transform: translateY(0); /* 回到初始位置 */}
}/* 應用動畫到指定的元素 */
.element {animation: floating 2s ease infinite; /* 動畫名稱、持續時間、緩動函數、循環次數 */
}

代碼描述

在這個示例中，我們定義了一個名為floating的動畫，它會在2秒內完成一次完整的上下浮動。動畫的起始狀態是元素的原始位置（translateY(0)），中間狀態是向上移動4像素（translateY(-4px)），最后狀態是回到原始位置。通過將這個動畫應用到一個具有.element類的元素上，我們可以實現上下懸浮的效果。

運行結果