CSS3動畫是一種可以給網頁增加更好用戶體驗的方法。下面我將向你介紹如何使用CSS3動畫來創造一個美麗的開花效果。

.flower{
width: 400px;
height: 400px;
background-color: #f7f7f7;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.petal{
position: absolute;
width: 30px;
height: 60px;
background-color: #f29898;
transform: rotate(45deg);
border-radius: 20px;
animation-name: grow;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.petal1{
left: 50%;
top: -10%;
}
.petal2{
left: 20%;
top: 15%;
}
.petal3{
right: 20%;
top: 15%;
}
.petal4{
left: 50%;
bottom: -10%;
}
.petal5{
right: 50%;
bottom: -10%;
}
@keyframes grow{
0%{
transform: rotate(45deg) scale(0);
}
50%{
transform: rotate(45deg) scale(1.2);
opacity: 1;
}
100%{
transform: rotate(45deg) scale(1);
}
}

在這段代碼中，我們創建了一個包含花瓣容器的圓形div，并且設置了樣式，包括背景顏色、邊框半徑和溢出隱藏。我們還創建了一個表示花瓣的類，設置了花瓣的width、height、顏色和旋轉屬性。我們還為每個花瓣設置了不同的位置，這樣它們就可以組成一個完整的花朵。

接下來，我們為每個花瓣設置了一個名為grow的動畫，這將使花瓣逐漸變大。在50%的時間內，花瓣將以1.2倍的尺寸進行放大，并且透明度設置為1。在100%的時間內，花瓣以原始尺寸呈現。我們還將動畫的持續時間和迭代次數設置為無限，這樣動畫就會一直播放。

通過這些代碼，我們得到了一個美麗的開花效果，可以讓你的網頁更具吸引力。