CSS3四個花瓣是一個簡單而又令人驚嘆的CSS動畫效果，可以在網站上實現華麗的圖形效果。四個花瓣由四條線條組成，當它們旋轉時，它們會形成一個華麗的花瓣效果。

.petals {
position: relative;
margin: 100px auto;
width: 250px;
height: 250px;
transform-style: preserve-3d;
animation: spin 6s 0s ease-in-out infinite;
}
.petals::before, .petals::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #de4164;
top: 0;
left: 0;
transform-origin: 100% 100%;
}
.petals::before {
transform: rotateX(90deg) rotateZ(0deg);
}
.petals::after {
transform: rotateX(90deg) rotateZ(90deg);
}
@keyframes spin {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}

在這段代碼中，我們定義了一個名為“petals”的CSS類。這個類被用來創建四個花瓣的動畫效果。我們使用了transform-style屬性來確保元素中的每一個子元素都能夠被沿著正確的軸旋轉和變換。我們還添加了keyframes動畫，讓四個花瓣無限地旋轉。

四個花瓣通過偽元素::before和::after來創建。這兩個元素都是圓形的，然后用一個10像素的紅色邊框進行外圍線條的繪制。當它們通過rotateX和rotateZ變換進行旋轉時，它們現在看起來像一個花瓣。

在花瓣的動畫效果中，我們使用了animation屬性。它告訴瀏覽器這個元素應該在持續6秒的時間內從0度旋轉到360度，并且應該使用ease-in-out的緩動功能。通過將此動畫設置為infinite，瀏覽器將無限制地循環播放此動畫。

最終結果是一個華麗的四個花瓣動畫效果，在網站上使用時，可以給用戶留下深刻印象。