小草搖曳是一種常見(jiàn)的css動(dòng)畫效果，它可以讓頁(yè)面顯得更加生動(dòng)有趣。下面我們來(lái)介紹一下如何實(shí)現(xiàn)小草搖曳的效果。

.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);
}
}

這段代碼中，我們首先定義了一個(gè).grass元素，代表了小草的主要部分。接著，我們使用:before偽元素來(lái)定義小草的葉子，使用transform-origin屬性來(lái)設(shè)置旋轉(zhuǎn)的起點(diǎn)。然后，我們使用animation屬性來(lái)定義旋轉(zhuǎn)動(dòng)畫，設(shè)置循環(huán)次數(shù)為無(wú)限循環(huán)。在關(guān)鍵幀中，我們使用transform屬性來(lái)旋轉(zhuǎn)小草的葉子，讓它呈現(xiàn)出搖曳的效果。