← back to Only CSS: Truck a GO, GO! GOOOO!!compare with ground truth →
model output
GPT-5.4
Only CSS: Truck a GO, GO! GOOOO!!
A 0.66T 0.63
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>Looping Tumbling Truck</title>
7<style>
8 :root{
9 --bg:#ffffff;
10 --truck:#d8d1ad;
11 --truck-dark:#c8c09a;
12 --truck-light:#e6dfbf;
13 --glass:#8fb8ff;
14 --glass-dark:#5f84c8;
15 --wheel:#050505;
16 --rim:#d9d9d9;
17 --lamp:#ffe8f0;
18 --shadow:rgba(0,0,0,.18);
19 }
20
21 html,body{
22 margin:0;
23 width:100%;
24 height:100%;
25 overflow:hidden;
26 background:var(--bg);
27 font-family:sans-serif;
28 }
29
30 .scene{
31 position:relative;
32 width:100vw;
33 height:100vh;
34 background:#fff;
35 perspective:1200px;
36 overflow:hidden;
37 }
38
39 .rig{
40 position:absolute;
41 left:50%;
42 top:50%;
43 width:220px;
44 height:160px;
45 transform-style:preserve-3d;
46 animation: travel 4.8s linear infinite;
47 }
48
49 .shadow{
50 position:absolute;
51 left:50%;
52 top:50%;
53 width:150px;
54 height:58px;
55 margin-left:-75px;
56 margin-top:18px;
57 background:radial-gradient(ellipse at center, rgba(0,0,0,.22) 0%, rgba(0,0,0,.14) 38%, rgba(0,0,0,.06) 62%, rgba(0,0,0,0) 78%);
58 filter:blur(10px);
59 transform-origin:center;
60 animation: shadowMove 4.8s linear infinite;
61 }
62
63 .truck{
64 position:absolute;
65 left:50%;
66 top:50%;
67 width:140px;
68 height:90px;
69 margin-left:-70px;
70 margin-top:-45px;
71 transform-style:preserve-3d;
72 animation: tumble 4.8s cubic-bezier(.55,.02,.45,.98) infinite;
73 }
74
75 .body{
76 position:absolute;
77 inset:0;
78 transform-style:preserve-3d;
79 }
80
81 .bed{
82 position:absolute;
83 left:8px;
84 top:28px;
85 width:72px;
86 height:42px;
87 background:linear-gradient(135deg,var(--truck-light),var(--truck));
88 transform:translateZ(8px) skewX(-18deg);
89 box-shadow:inset -10px 0 18px rgba(0,0,0,.05);
90 }
91
92 .cab{
93 position:absolute;
94 right:10px;
95 top:18px;
96 width:54px;
97 height:52px;
98 background:linear-gradient(135deg,var(--truck-light),var(--truck));
99 transform:translateZ(14px) skewX(-12deg);
100 box-shadow:inset -8px 0 14px rgba(0,0,0,.06);
101 }
102
103 .roof{
104 position:absolute;
105 right:18px;
106 top:10px;
107 width:42px;
108 height:18px;
109 background:linear-gradient(135deg,var(--truck-light),var(--truck-dark));
110 transform:translateZ(18px) skewX(-18deg);
111 }
112
113 .windshield{
114 position:absolute;
115 right:8px;
116 top:18px;
117 width:34px;
118 height:44px;
119 background:linear-gradient(135deg, rgba(180,215,255,.95), rgba(110,155,235,.9));
120 clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,0 18%);
121 transform:translateZ(15px);
122 box-shadow:inset -10px 0 0 rgba(40,70,130,.22);
123 }
124
125 .window{
126 position:absolute;
127 right:44px;
128 top:22px;
129 width:18px;
130 height:34px;
131 background:linear-gradient(135deg, rgba(170,205,255,.9), rgba(95,132,200,.85));
132 transform:translateZ(15px) skewY(-8deg);
133 box-shadow:inset -6px 0 0 rgba(40,70,130,.18);
134 }
135
136 .front{
137 position:absolute;
138 right:0;
139 top:28px;
140 width:22px;
141 height:38px;
142 background:linear-gradient(180deg,var(--truck-light),var(--truck));
143 transform:translateZ(10px);
144 }
145
146 .lamp{
147 position:absolute;
148 width:8px;
149 height:18px;
150 border-radius:6px;
151 background:var(--lamp);
152 box-shadow:0 0 2px rgba(255,220,230,.8);
153 }
154 .lamp.l1{ right:6px; top:32px; transform:translateZ(11px); }
155 .lamp.l2{ right:6px; top:54px; transform:translateZ(11px); }
156
157 .wheel{
158 position:absolute;
159 width:24px;
160 height:24px;
161 border-radius:50%;
162 background:var(--wheel);
163 box-shadow:inset 0 0 0 6px var(--rim);
164 }
165
166 .wheel.w1{ left:18px; top:66px; }
167 .wheel.w2{ left:48px; top:66px; }
168 .wheel.w3{ left:88px; top:66px; }
169 .wheel.w4{ left:108px; top:66px; }
170
171 .axle{
172 position:absolute;
173 left:28px;
174 top:76px;
175 width:84px;
176 height:4px;
177 background:#666;
178 transform:rotate(-8deg);
179 border-radius:2px;
180 }
181
182 @keyframes travel{
183 0% { transform:translate3d(240px,-120px,0); }
184 12% { transform:translate3d(120px,-20px,0); }
185 25% { transform:translate3d(-40px,90px,0); }
186 38% { transform:translate3d(-300px,170px,0); }
187 50% { transform:translate3d(-120px,70px,0); }
188 62% { transform:translate3d(40px,20px,0); }
189 75% { transform:translate3d(220px,-10px,0); }
190 87% { transform:translate3d(120px,80px,0); }
191 100% { transform:translate3d(-40px,170px,0); }
192 }
193
194 @keyframes tumble{
195 0%{
196 transform:rotateZ(-28deg) rotateX(8deg) rotateY(-10deg) scale(.92);
197 }
198 12.5%{
199 transform:rotateZ(-78deg) rotateX(10deg) rotateY(-18deg) scale(.94);
200 }
201 25%{
202 transform:rotateZ(-132deg) rotateX(6deg) rotateY(-28deg) scale(.96);
203 }
204 37.5%{
205 transform:rotateZ(-228deg) rotateX(10deg) rotateY(8deg) scale(.93);
206 }
207 50%{
208 transform:rotateZ(-320deg) rotateX(4deg) rotateY(18deg) scale(.88);
209 }
210 62.5%{
211 transform:rotateZ(-360deg) rotateX(8deg) rotateY(10deg) scale(.84);
212 }
213 75%{
214 transform:rotateZ(-388deg) rotateX(8deg) rotateY(-8deg) scale(.9);
215 }
216 87.5%{
217 transform:rotateZ(-438deg) rotateX(10deg) rotateY(-18deg) scale(.94);
218 }
219 100%{
220 transform:rotateZ(-492deg) rotateX(8deg) rotateY(-28deg) scale(.96);
221 }
222 }
223
224 @keyframes shadowMove{
225 0%{
226 transform:translate(-50%,-50%) scale(.9,.75) rotate(-18deg);
227 opacity:.55;
228 }
229 12.5%{
230 transform:translate(-50%,-50%) scale(1.05,.9) rotate(-28deg);
231 opacity:.42;
232 }
233 25%{
234 transform:translate(-50%,-50%) scale(1.18,.98) rotate(-38deg);
235 opacity:.34;
236 }
237 37.5%{
238 transform:translate(-50%,-50%) scale(.95,.82) rotate(-8deg);
239 opacity:.48;
240 }
241 50%{
242 transform:translate(-50%,-50%) scale(.72,.62) rotate(8deg);
243 opacity:.28;
244 }
245 62.5%{
246 transform:translate(-50%,-50%) scale(.68,.58) rotate(12deg);
247 opacity:.24;
248 }
249 75%{
250 transform:translate(-50%,-50%) scale(.92,.78) rotate(-12deg);
251 opacity:.5;
252 }
253 87.5%{
254 transform:translate(-50%,-50%) scale(1.08,.92) rotate(-24deg);
255 opacity:.4;
256 }
257 100%{
258 transform:translate(-50%,-50%) scale(1.18,.98) rotate(-36deg);
259 opacity:.34;
260 }
261 }
262</style>
263</head>
264<body>
265 <div class="scene">
266 <div class="rig">
267 <div class="shadow"></div>
268 <div class="truck">
269 <div class="body">
270 <div class="bed"></div>
271 <div class="cab"></div>
272 <div class="roof"></div>
273 <div class="window"></div>
274 <div class="windshield"></div>
275 <div class="front"></div>
276 <div class="lamp l1"></div>
277 <div class="lamp l2"></div>
278 <div class="axle"></div>
279 <div class="wheel w1"></div>
280 <div class="wheel w2"></div>
281 <div class="wheel w3"></div>
282 <div class="wheel w4"></div>
283 </div>
284 </div>
285 </div>
286 </div>
287</body>
288</html>