CSS是網頁設計的重要基礎，通過CSS可以讓網頁元素有不同的呈現效果。其中CSS的動畫效果可以讓元素有飄動的效果，為網頁增添了一份活潑的氛圍。

/*定義元素的初始位置、大小和樣式*/
.float-element{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: #f26d7d;
border-radius: 50%;
}
/*定義元素的動畫規則，實現元素飄動效果*/
@-webkit-keyframes float{
0% {
-webkit-transform:translate(0,0); transform:translate(0,0);    
}
50%{
-webkit-transform:translate(0,10px); transform:translate(0,10px);
}
100% {
-webkit-transform:translate(0,0); transform:translate(0,0);
}
}
/*為元素添加動畫效果*/
.float-element{
animation: float 2s infinite ease;
}

以上代碼實現了一個圓形的浮動元素，根據定義的動畫規則，元素會在2秒的時間內上下浮動。其中-webkit-keyframes定義了動畫規則，0%代表初始狀態，50%是元素上浮的狀態，100%代表元素回到初始狀態。@keyframes定義了動畫規則，float是動畫名稱，2s是動畫時間，infinite表示無限循環，ease是動畫速度曲線。

需要注意的是，浮動元素必須設置position屬性為absolute或fixed，否則元素不會浮動。還可以通過改變動畫規則中的參數實現不同的飄動效果，例如改變translate的值、增加動畫規則的數量等。