CSS3的出現，為我們的網站和應用程序帶來了更多的創意發揮空間。其中，草搖晃效果是非常獨特和眼-catching的，給人一種自然和生動的感覺。

/*草搖晃動畫*/ 
 @keyframes sway { 
0% {transform:rotate(0deg);} 
50% {transform:rotate(20deg);} 
100% {transform:rotate(0deg);} 
 } 
 .grass { 
animation: sway 2s infinite; 
 }

實現草搖晃的方法非常簡單，只需使用CSS3的關鍵幀動畫即可。上述代碼中，我們定義了一個名為“sway”的動畫。該動畫具有三個關鍵幀，即0%、50%和100%。第一幀是“起始幀”，最后一幀是“結束幀”，中間一幀是“過渡幀”。

我們給第一關鍵幀設置了一個transform屬性，rotate(0deg)表示不旋轉，即保持原樣。第二關鍵幀設置rotate(20deg)，即順時針旋轉20度。第三關鍵幀同樣設置為rotate(0deg)，使它回到起始狀態。在動畫完成后，它將開始下一次動畫。最后，我們將.sway類與動畫綁定，這樣草就能像真正的草一樣微微搖晃。

通過這段簡短的CSS代碼，我們可以將一張靜態的圖片轉化為動態的場景。這是CSS3的魅力，它為開發人員和用戶帶來了新的體驗和感受，同時加強了網站和應用程序的美感和互動性。