若要實現花瓣飄落的效果，我們可以使用CSS動畫，以下是實現該效果的代碼：

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #dde9f4;
overflow: hidden;
}
.petal {
width: 10px;
height: 20px;
background: #f9b7b2;
border-radius: 50%;
position: absolute;
animation: fall 6s linear infinite;
z-index: -1;
}
@keyframes fall {
0% {
transform: translateY(-100px) rotate(0deg);
}
100% {
transform: translateY(800px) rotate(-360deg);
}
}
/* 以下是JS代碼，實現隨機分布花瓣的位置與大小 */
var petalContainer = document.getElementById('petal-container');
for (var i = 0; i< 50; i++) {
var petal = document.createElement('div');
petal.className = 'petal';
petalContainer.appendChild(petal);
var size = Math.random() * 20;
var x = Math.random() * (window.innerWidth - size);
var y = Math.random() * (window.innerHeight - size);
petal.style.width = size + 'px';
petal.style.height = size + 'px';
petal.style.left = x + 'px';
petal.style.top = y + 'px';
}

首先，我們設置頁面背景顏色為淡藍色，并使其溢出隱藏。然后，我們為花瓣創建類名，設置類名的寬度、高度、背景顏色、圓角和位置。下一步我們使用CSS動畫，讓花瓣下落并旋轉360度，軌跡是線性的，并且無限循環。

最后，我們使用JavaScript代碼生成50個花瓣，并隨機分布它們的位置和大小。最終實現了花瓣飄落的效果。