CSS3動畫在網頁設計中被廣泛應用，可以添加動態效果，使網頁更加生動有趣。其中，菊花動畫是一種簡單但非常常見的動畫效果，下面我們來探討如何使用CSS3實現菊花動畫。

/* 定義菊花的樣式 */
.spinner {
width: 50px;
height: 50px;
margin: 0 auto;
border-style: solid;
border-width: 6px;
border-color: #f3f3f3 #f3f3f3 #f3f3f3 transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* 定義菊花旋轉的動畫 */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

如上代碼所示，我們先定義了一個寬高為50像素的 .spinner ，并設置邊框樣式為實心、邊框寬度為6像素、顏色為白色（#f3f3f3）和默認顏色（transparent），同時還設置了一個50%的邊框半徑，使其變成圓形菊花圖案。

接下來，使用 @keyframes 給菊花添加旋轉動畫，從0度旋轉到360度，旋轉時間為1秒，線性變化，并且讓動畫無限循環。

最后，在HTML文檔中添加 <div class="spinner"></div> 語句，即可實現一個簡單的菊花動畫。