CSS是我們經常使用的前端技術之一，它可以讓我們在網頁中使用各種各樣的效果和動畫。今天，我想和大家分享一個很有趣的CSS效果——花草搖擺。

.flower{
width: 100px;
height: 100px;
background-image:url('flower.png');
background-size: cover;
transform-origin: center bottom;
animation-name: swing;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
@keyframes swing{
0%{
transform: rotateZ(2deg);
}
50%{
transform: rotateZ(-2deg);
}
100%{
transform: rotateZ(2deg);
}
}

以上是花草搖擺的CSS代碼。我們以花朵為例，首先定義一個名為“flower”的class，然后設置其寬高并且指定背景圖片為“flower.png”。由于我們要設置搖擺的中心點，所以使用transform-origin屬性將中心點設置為花朵底部中心位置。

接著，我們使用@keyframes關鍵字定義一個名為“swing”的動畫。其中，代碼中的0%、50%和100%表示動畫執行的時間，而transform: rotateZ(2deg)表示花朵旋轉的角度。

最后，我們將動畫綁定到“.flower”這個class中，并設置其執行時長、時間函數、結束時的狀態、循環次數。這樣，當我們在頁面中引用該class時，花朵就會搖擺起來。

通過以上的CSS代碼，我們不僅可以實現花草搖擺的效果，還可以定義其他各種圖形的動畫效果。希望大家可以去嘗試一下哦。