小草搖曳是一種常見的css動畫效果，它可以讓頁面顯得更加生動有趣。下面我們來介紹一下如何實現小草搖曳的效果。

.grass {
width: 20px;
height: 100px;
border-radius: 50% 50% 0 0;
background-color: #96c56f;
position: relative;
margin: 20px auto;
}
.grass:before {
content: "";
width: 20px;
height: 80px;
border-radius: 50% 50% 0 0;
background-color: #567b3e;
position: absolute;
left: 0;
bottom: 0;
transform-origin: bottom center;
animation: sway 3s ease-in-out infinite;
}
@keyframes sway {
0% {
transform: rotate(0);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0);
}
}

這段代碼中，我們首先定義了一個.grass元素，代表了小草的主要部分。接著，我們使用:before偽元素來定義小草的葉子，使用transform-origin屬性來設置旋轉的起點。然后，我們使用animation屬性來定義旋轉動畫，設置循環次數為無限循環。在關鍵幀中，我們使用transform屬性來旋轉小草的葉子，讓它呈現出搖曳的效果。