今天我們來學習一下如何使用純css3來制作一個小豬的浮動動畫。

.pig {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 0;
animation: pigSwim 1s linear infinite;
}
@keyframes pigSwim {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px) rotate(-45deg);
}
100% {
transform: translateX(400px);
}
}

首先，我們需要創建一個名為.pig的div元素作為小豬的容器。然后，我們設置一些基本樣式，例如寬度和高度為100px，背景色為粉色，邊界半徑為50％等等。接下來，我們將小豬的位置設置為絕對定位，并將其放置在頁面的底部左側。

現在，我們需要創建一個關鍵幀動畫（keyframes）來讓小豬浮動。我們將命名此動畫為pigSwim，并使其在1秒鐘內以線性方式無限循環運行。

在動畫中，我們使用了三個關鍵幀，分別是0％，50％和100％。在0％時，我們將小豬的位置設置為初始狀態，即不偏移。在50％時，我們將小豬向右偏移200px，并將其旋轉-45度以進行一些角度調整。最后，在100％時，我們將小豬向右偏移400px，使其完全離開頁面。這樣，我們就完成了一個簡單的小豬浮動動畫。

現在我們可以在HTML中添加一個.pig div元素，并在其中嵌入我們剛剛創建的CSS樣式。當我們在瀏覽器中查看頁面時，我們應該能夠看到一個開始在左側游泳的小豬，最終離開頁面的效果。