CSS自行車動畫效果是一種非常流行的CSS動畫效果。這種效果可以在網站中使用，讓你的頁面更加生動、活潑，吸引用戶的注意力。此外，這種效果也是一種很好的練手方法，可以幫助你更好地理解CSS的特性。

/* CSS代碼 */
.bike {
width: 40px;
height: 28px;
position: relative;
animation: run 4s ease-in-out infinite;
}
.wheel {
width: 15px;
height: 15px;
background-color: #333;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -7.5px;
margin-left: -7.5px;
animation: wheel 1s linear infinite;
}
.wheel.right {
right: 0;
left: auto;
}
.pedalContainer {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
margin-left: 0;
transform: rotateZ(45deg);
animation: pedal 0.5s ease-in-out alternate infinite;
}
.pedal.left {
left: 0;
transform: rotateZ(-135deg);
}
@keyframes run {
0% {transform: translateX(0);}
25% {transform: translateX(50px);}
50% {transform: translateX(100px);}
75% {transform: translateX(50px);}
100% {transform: translateX(0);}
}
@keyframes wheel {
0% {transform: rotateZ(0);}
100% {transform: rotateZ(-360deg);}
}
@keyframes pedal {
0% {transform: rotateZ(45deg);}
100% {transform: rotateZ(-45deg);}
}

代碼中，首先定義了一個bike類，表示自行車的整體。

接著，定義了左右兩個輪子的wheel類，以及左右兩個踏板的pedal類。

在CSS中使用了關鍵幀動畫，通過transform屬性來控制物體的位移、旋轉等動作。animate的持續時間、動畫效果和重復次數由后面的參數決定。

最后，只需要將這些類應用到HTML標簽上，就可以實現一個簡單的自行車動畫效果了：

<div class="bike">
<div class="wheel"></div>
<div class="wheel right"></div>
<div class="pedalContainer">
<div class="pedal"></div>
<div class="pedal left"></div>
</div>
</div>

運行代碼，在你的頁面上就可以看到一個自走的自行車，讓你的頁面更加生動有趣。