使用CSS3绘制一辆可以运动的自行车动画

创建一个简单的自行车动画使用CSS3确实是一个有趣的挑战。下面是一个简化的示例，用于指导你如何开始：

1. HTML结构：

<div class="bicycle">
    <div class="wheel front"></div>
    <div class="frame"></div>
    <div class="wheel back"></div>
</div>

2. CSS样式：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.bicycle {
    position: relative;
    width: 200px;
    height: 120px;
}

.wheel {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 5px solid black;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.front {
    top: 0;
    left: 60px;
}

.back {
    bottom: 0;
    left: 60px;
    animation-direction: reverse; /* 使后轮反向旋转 */
}

.frame {
    position: absolute;
    width: 120px;
    height: 10px;
    background-color: black;
    top: 40px;
    left: 40px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

这个示例创建了一个非常简单的自行车模型，其中车轮是旋转的。你可以根据需要进一步扩展和细化这个模型，例如添加更多的细节、颜色、把手、脚踏板等。

请注意，CSS动画的能力是有限的，特别是对于更复杂的动画。如果你需要更高级的功能或更精细的控制，可能需要考虑使用JavaScript或WebGL等技术。