CSS jQuery花瓣是一種優美的動態效果，可以增加網頁的視覺效果和用戶體驗。下面介紹如何使用CSS和jQuery創建花瓣。

/*CSS*/
.petals {
position: absolute;
z-index: 1;
width: 0;
height: 0;
border-right: 60px solid transparent;
border-bottom: 60px solid #f0f;
border-left: 60px solid transparent;
transform: rotate(60deg);
}
/*jQuery*/
$(document).ready(function() {
for (var i = 0; i< 7; i++) {
$(".flowers").append("
");
$(".petals").eq(i).css("transform", "rotate(" + 60 * i + "deg) translate(0, -90px)");
}
});

代碼中，CSS樣式定義了花瓣的形狀和效果，并設置了絕對位置和z-index，使其覆蓋在其他元素上方。然后使用jQuery動態生成花瓣，利用循環語句生成7個花瓣，并設置旋轉角度和位移，使其形成正六邊形。代碼執行后，可見花瓣在網頁中動態展現出來，為網頁增添了生動的色彩和感觀效果。