CSS 網頁飄花瓣特效是一種簡單而美麗的網頁設計風格，可以將網站變得更具有味道。我們可以輕松地使用 CSS 來實現這種特效，讓網站更加美觀。

// HTML 代碼
<div class="petal"></div>
// CSS 代碼
.petal {
position: absolute;
background: url("petal.png") no-repeat;
width: 40px;
height: 40px;
animation: petalFall 10s linear infinite;
/* 動畫前的位置 */
/* 當前位置是一個范圍在 x: 0%-100% 之間，y: -5% 的隨機位置 */
left: calc(100% * var(--rx));
top: calc(-5% * var(--ry));
}
/* 動畫 */
@keyframes petalFall {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(100vh) rotate(360deg);
}
}
/* JS 代碼 */
var petals = document.querySelectorAll('.petal');
for (var i = 0; i < petals.length; i++) {
var petal = petals[i];
petal.style.setProperty('--rx', Math.random());
petal.style.setProperty('--ry', Math.random());
}

上面的代碼片段中，我們定義了一個類名為 ".petal" 的 div 元素，使用背景圖片來呈現花瓣。通過 CSS 中的 "position: absolute;" 來設置絕對定位，并使用 "calc()" 函數來計算位置。接著，我們使用 animation 屬性來定義 "petalFall" 動畫。這個動畫會使花瓣從屏幕上方飄落到屏幕底部，每次循環的時間為 10 秒鐘，無限循環。

為了讓花瓣看起來更加自然，我們還設置了一個隨機位置，使用 JavaScript 來動態地改變花瓣的位置。在代碼中，我們使用了 "var(--rx)" 和 "var(--ry)" 這兩個 CSS 變量。在 JavaScript 中，我們遍歷所有的 ".petal" 類元素，并使用 Math.random() 方法來生成隨機數，將隨機數賦值給 "--rx" 和 "--ry" 變量。

這樣一來，我們就可以在網頁中添加許多花瓣，讓它們飄來飄去，營造出優美浪漫的氛圍。