CSS3可以讓我們輕松地畫出漂亮的紫荊花，下面是一個簡單的例子：

/* 設(shè)置畫布大小 */
#canvas{
width: 200px;
height: 200px;
}
/* 設(shè)置紫荊花的顏色 */
#petals{
background: #bf3aab;
}
/* 實現(xiàn)每個花瓣 */
.petal{
width: 20px;
height: 60px;
position: absolute;
border-radius: 10px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: #f1d8fe;
transform-origin: bottom center;
animation: petal 8s ease-in-out infinite;
}
/* 定義花瓣的動畫 */
@keyframes petal{
0%{ transform: rotate(0deg); }
25%{ transform: rotate(45deg); }
50%{ transform: rotate(0deg); }
75%{ transform: rotate(-45deg); }
100%{ transform: rotate(0deg); }
}
/* 設(shè)置花蕊的樣式 */
#center{
width: 40px;
height: 40px;
border-radius: 20px;
position: absolute;
background: #ffefd5;
left: 80px;
top: 80px;
transform-origin: center center;
animation: center 6s ease-in-out infinite;
}
/* 定義花蕊的動畫 */
@keyframes center{
0%{ transform: scale(1); }
50%{ transform: scale(1.2); }
100%{ transform: scale(1); }
}

需要注意的是，這個紫荊花的動畫效果是使用了CSS3的動畫特性實現(xiàn)的。我們定義了每個花瓣的樣式，在樣式中設(shè)置了花瓣的高度、寬度、位置、圓角以及背景色等。通過定位這些花瓣，并且不斷旋轉(zhuǎn)它們，我們就可以形成一個漂亮的花瓣動畫。同時，我們也設(shè)置了花蕊的樣式，通過不斷地縮放花蕊，讓整個紫荊花變得更加生動。