如果我們想給網頁增添一些美觀的效果，可以使用 CSS 來實現。下面將介紹一種可以讓花瓣飄動的效果，讓頁面更加生動。

/* 使用 CSS3 的 keyframes 規則定義花瓣飄動動畫 */
@keyframes petal-fall {
0% { transform: translate(0, -10px); }
100% { transform: translate(100px, 400px) rotate(420deg); }
}
/* 設置花瓣的樣式 */
.petal {
position: absolute;
background-color: #f8c3cd;
width: 10px;
height: 18px;
border-radius: 50%;
animation: petal-fall 8s linear infinite;
/* 使用無限循環讓花瓣一直飄動 */
}
/* 在 HTML 中使用 div 創建花瓣并添加到頁面中 */

首先，我們使用 CSS3 中的keyframes規則創建了一個叫做petal-fall的動畫。在這個動畫中，我們讓花瓣從頁面頂部向下移動到右下角并且旋轉420deg。

接下來，我們設置了花瓣的樣式，使用position: absolute;讓花瓣定位到頁面上，然后設定了花瓣的顏色、大小、形狀和動畫等屬性。最后，在 HTML 中創建了幾個花瓣的div并添加到頁面中。

通過這種方式，我們可以在網頁中添加一個生動的花瓣飄動效果，讓頁面更加美觀，也更具有吸引力。