大家好，今天我來給大家分享一個有趣的 CSS 動畫小例子，那就是用 CSS 制作小車動畫。

首先，我們需要一個基礎的 HTML 結構來實現這個小車動畫，代碼如下：

<div class="car">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
<div class="wheel left"></div>
<div class="wheel right"></div>
</div>

接下來，我們就可以開始寫 CSS 代碼了。首先，給整個小車容器設置一些基礎樣式：

.car {
width: 200px;
height: 100px;
position: relative;
}

然后，分別給小車的頂部、中部和底部設置樣式：

.top, .middle, .bottom {
position: absolute;
background-color: #333;
border-radius: 10px;
}
.top {
width: 100px;
height: 30px;
top: 0;
left: 50px;
}
.middle {
width: 180px;
height: 40px;
top: 30px;
left: 10px;
}
.bottom {
width: 200px;
height: 30px;
bottom: 0;
left: 0;
}

然后，給小車的兩個車輪添加樣式：

.wheel {
width: 40px;
height: 40px;
position: absolute;
background-color: black;
border-radius: 50%;
}
.left {
left: 20px;
bottom: 0;
}
.right {
right: 20px;
bottom: 0;
}

到這里，我們基本上就完成了小車的樣式設置。接下來，我們就需要使用一些 CSS 動畫來制作小車的移動效果。代碼如下：

.car {
animation: move 4s linear infinite;
}
.wheel {
animation: rotate 4s linear infinite;
}
@keyframes move {
0% {
left: -200px;
}
100% {
left: 100%;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

通過上面的 CSS 代碼，我們實現了小車的移動和車輪的旋轉。現在，我們只需要把 HTML 結構和 CSS 代碼結合起來，就可以看到一個完整的 CSS 小車動畫了。

總之，用 CSS 制作小車動畫是一件有趣又有挑戰的事情。相信通過上面的介紹，大家也可以嘗試著自己動手實現一個小車動畫。