CSS3.0是一種強大的樣式語言，它允許我們通過CSS代碼為網頁添加各種各樣的動畫效果。其中，水草浮動動畫是一個非常有趣的效果，可以為您的網頁增添一些生氣勃勃的氣息。

.water-grass {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 100px;
background: url("water-grass.png") no-repeat center;
animation: sway 5s infinite;
animation-timing-function: ease-in-out;
transform-origin: center bottom;
}
@keyframes sway {
0% {
transform: translateX(-50%) rotate(5deg);
}
50% {
transform: translateX(-50%) rotate(-5deg);
}
100% {
transform: translateX(-50%) rotate(5deg);
}
}

上面的代碼使用了CSS3.0的@keyframes和animation屬性來實現這個水草浮動的動畫效果。我們先定義了一個.water-grass類來設置水草的樣式，然后設置animation屬性的值為sway 5s infinite，表示使用sway規則來執行動畫，每個周期時長為5s，無限循環執行。

接著，定義了一個@keyframes規則，它包含三個狀態：0%、50%和100%，我們在這里使用了transform屬性來設置水草的旋轉值，使它在動畫中產生晃動的效果。

最后，我們將這個.water-grass類應用到一個位置固定的元素中，使它出現在屏幕底部并水平居中。當頁面加載完畢后，水草就會自動開始浮動了。