CSS漂浮字，即文字或圖片以某種方式在頁面上呈現漂浮的效果，今天我們就來學習一下如何使用CSS制作漂浮字。

.floating-text {
position: relative;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating {
0% {
transform: translate(-5px, 5px);
}
50% {
transform: translate(5px, -5px);
}
100% {
transform: translate(-5px, 5px);
}
}

首先，我們需要設置漂浮元素的position屬性為relative，這樣才能通過transform屬性對其進行動畫效果的設置。

接下來，通過@keyframes規則來定義動畫關鍵幀，漂浮字的動畫效果是從左下角向右上方運動，通過transform的translate函數設置偏移量實現。

最后，為漂浮元素設置animation-name、animation-duration、animation-iteration-count和animation-timing-function等屬性，使其按照預定義的動畫規則運動。

除了漂浮字，我們還可以使用類似的方法制作漂浮圖片、按鈕等效果，只需要對樣式進行相應的調整即可。

希望這篇文章能夠幫助大家更好地掌握CSS的動畫效果設置。