← back to Only CSS: Truck a GO, GO! GOOOO!!compare with ground truth →
model output
Claude Sonnet 4.6
Only CSS: Truck a GO, GO! GOOOO!!
A 0.59T 0.33
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Rolling Truck Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 width: 1024px;
12 height: 768px;
13 background: white;
14 overflow: hidden;
15 position: relative;
16 }
17
18 .scene {
19 position: absolute;
20 width: 100%;
21 height: 100%;
22 }
23
24 .truck-wrapper {
25 position: absolute;
26 animation: truckMove 4s linear infinite;
27 transform-origin: center center;
28 }
29
30 .truck-container {
31 position: relative;
32 width: 120px;
33 height: 90px;
34 animation: truckRoll 4s linear infinite;
35 transform-origin: center center;
36 }
37
38 /* Shadow */
39 .shadow {
40 position: absolute;
41 bottom: -30px;
42 left: 50%;
43 transform: translateX(-50%);
44 width: 100px;
45 height: 20px;
46 background: radial-gradient(ellipse, rgba(0,0,0,0.2) 0%, transparent 70%);
47 border-radius: 50%;
48 animation: shadowPulse 4s linear infinite;
49 }
50
51 /* Truck body */
52 .truck-body {
53 position: absolute;
54 width: 120px;
55 height: 70px;
56 top: 10px;
57 left: 0;
58 }
59
60 /* Cargo area */
61 .cargo {
62 position: absolute;
63 left: 0;
64 top: 5px;
65 width: 65px;
66 height: 55px;
67 background: linear-gradient(135deg, #c8bc96 0%, #b8aa80 40%, #a89870 100%);
68 border-radius: 4px 0 0 4px;
69 }
70
71 /* Cab area */
72 .cab {
73 position: absolute;
74 right: 0;
75 top: 0;
76 width: 60px;
77 height: 60px;
78 background: linear-gradient(135deg, #d4c89a 0%, #c0b080 50%, #a89870 100%);
79 border-radius: 4px 8px 4px 4px;
80 }
81
82 /* Windshield */
83 .windshield {
84 position: absolute;
85 right: 5px;
86 top: 5px;
87 width: 40px;
88 height: 35px;
89 background: linear-gradient(135deg, #7090c0 0%, #5070a0 50%, #4060a0 100%);
90 border-radius: 4px 6px 2px 2px;
91 opacity: 0.85;
92 }
93
94 /* Side windows */
95 .window-side {
96 position: absolute;
97 left: 45px;
98 top: 10px;
99 width: 22px;
100 height: 18px;
101 background: linear-gradient(135deg, #6080b0 0%, #4060a0 100%);
102 border-radius: 2px;
103 opacity: 0.8;
104 }
105
106 /* Pink accents/lights */
107 .light-front {
108 position: absolute;
109 right: 2px;
110 top: 42px;
111 width: 12px;
112 height: 7px;
113 background: #ffcccc;
114 border-radius: 2px;
115 }
116
117 .light-rear {
118 position: absolute;
119 left: 2px;
120 top: 35px;
121 width: 10px;
122 height: 6px;
123 background: #ffcccc;
124 border-radius: 2px;
125 }
126
127 /* Wheels */
128 .wheel {
129 position: absolute;
130 width: 26px;
131 height: 26px;
132 background: radial-gradient(circle at 40% 40%, #555 0%, #222 50%, #111 100%);
133 border-radius: 50%;
134 border: 3px solid #111;
135 }
136
137 .wheel::after {
138 content: '';
139 position: absolute;
140 top: 50%;
141 left: 50%;
142 transform: translate(-50%, -50%);
143 width: 10px;
144 height: 10px;
145 background: #444;
146 border-radius: 50%;
147 }
148
149 .wheel-fl {
150 bottom: -8px;
151 left: 10px;
152 animation: wheelSpin 0.5s linear infinite;
153 }
154
155 .wheel-rl {
156 bottom: -8px;
157 left: 40px;
158 animation: wheelSpin 0.5s linear infinite;
159 }
160
161 .wheel-fr {
162 bottom: -8px;
163 right: 25px;
164 animation: wheelSpin 0.5s linear infinite;
165 }
166
167 .wheel-rr {
168 bottom: -8px;
169 right: 5px;
170 animation: wheelSpin 0.5s linear infinite;
171 }
172
173 /* Roof detail */
174 .roof {
175 position: absolute;
176 right: 5px;
177 top: -5px;
178 width: 50px;
179 height: 10px;
180 background: linear-gradient(90deg, #c0b080, #d4c89a);
181 border-radius: 4px 4px 0 0;
182 }
183
184 @keyframes truckMove {
185 0% { left: 900px; top: 200px; }
186 25% { left: 600px; top: 350px; }
187 50% { left: 300px; top: 380px; }
188 75% { left: 150px; top: 280px; }
189 100% { left: -200px; top: 200px; }
190 }
191
192 @keyframes truckRoll {
193 0% { transform: rotate(-30deg); }
194 100% { transform: rotate(330deg); }
195 }
196
197 @keyframes wheelSpin {
198 0% { transform: rotate(0deg); }
199 100% { transform: rotate(360deg); }
200 }
201
202 @keyframes shadowPulse {
203 0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(1); }
204 25% { opacity: 0.4; transform: translateX(-50%) scaleX(0.8); }
205 50% { opacity: 0.6; transform: translateX(-50%) scaleX(1.1); }
206 75% { opacity: 0.4; transform: translateX(-50%) scaleX(0.9); }
207 }
208</style>
209</head>
210<body>
211<div class="scene">
212 <div class="truck-wrapper">
213 <div class="truck-container">
214 <div class="truck-body">
215 <div class="cargo">
216 <div class="light-rear"></div>
217 </div>
218 <div class="cab">
219 <div class="windshield"></div>
220 <div class="window-side"></div>
221 <div class="light-front"></div>
222 <div class="roof"></div>
223 </div>
224 <div class="wheel wheel-fl"></div>
225 <div class="wheel wheel-rl"></div>
226 <div class="wheel wheel-fr"></div>
227 <div class="wheel wheel-rr"></div>
228 </div>
229 <div class="shadow"></div>
230 </div>
231 </div>
232</div>
233
234<script>
235 // The animation is handled purely by CSS
236 // The truck rolls from right to left while rotating
237</script>
238</body>
239</html>