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

要制作花的動(dòng)畫，我們需要先為花瓣和花蕊分別定義一個(gè)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)鍵幀動(dòng)畫（@keyframes）來實(shí)現(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中添加一個(gè)包含花瓣和花蕊的容器元素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>

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