CSS動畫是Web開發(fā)中常用的一種技術(shù)，它可以為網(wǎng)頁添加一些生動的效果，例如花的動畫。

要制作花的動畫，我們需要先為花瓣和花蕊分別定義一個CSS類：

.flower-petal {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 20px;
border-radius: 10px;
transform-origin: bottom center;
}
.flower-core {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
transform-origin: center center;
}

接著，我們使用關(guān)鍵幀動畫（@keyframes）來實現(xiàn)花的開合效果：

@keyframes flower-bloom {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(360deg) scale(1.5);
}
}
.flower-petal::before,
.flower-petal::after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: #ff69b4;
}
.flower-petal::before {
transform: rotate(45deg);
}
.flower-petal::after {
transform: rotate(-45deg);
}
.flower-core {
background-color: #ffa500;
}
.flower {
position: relative;
width: 50px;
height: 50px;
}
.flower:hover .flower-petal::before,
.flower:hover .flower-petal::after,
.flower:hover .flower-core {
animation: flower-bloom 1s ease forwards;
}

最后，我們在HTML中添加一個包含花瓣和花蕊的容器元素div，并分別為它們添加對應(yīng)的CSS類：

<div class="flower">
<div class="flower-petal"></div>
<div class="flower-petal"></div>
<div class="flower-petal"></div>
<div class="flower-petal"></div>
<div class="flower-petal"></div>
<div class="flower-petal"></div>
<div class="flower-petal"></div>
<div class="flower-petal"></div>
<div class="flower-core"></div>
</div>

運行代碼后，我們將得到一個帶有花的動畫效果的網(wǎng)頁。通過這個實例，我們可以看到CSS動畫可以輕松實現(xiàn)生動的效果，為Web開發(fā)提供了更多的可能性。