← back to Only CSS: Bicyclecompare with ground truth →
model output
GPT-5.4
Only CSS: Bicycle
A 0.85T 0.36
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" />
6<title>Bicycle Animation</title>
7<style>
8 :root{
9 --bg:#ececf8;
10 --purple:#6f3fc0;
11 --purple2:#8f63e6;
12 --line:#c9b8ff;
13 --rim:#0b0b0f;
14 --metal:#d9d9e6;
15 --shadow:rgba(0,0,0,.08);
16 }
17
18 html,body{
19 margin:0;
20 height:100%;
21 overflow:hidden;
22 background:var(--bg);
23 font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
24 }
25
26 .scene{
27 position:relative;
28 width:100vw;
29 height:100vh;
30 background:var(--bg);
31 overflow:hidden;
32 }
33
34 .title{
35 position:absolute;
36 left:50%;
37 top:18%;
38 transform:translateX(-50%);
39 color:var(--purple);
40 font-size:min(10vw,5.2rem);
41 font-weight:300;
42 letter-spacing:.01em;
43 z-index:5;
44 user-select:none;
45 }
46
47 .world{
48 position:absolute;
49 left:50%;
50 top:56%;
51 width:min(52vw,520px);
52 height:min(28vw,280px);
53 transform-style:preserve-3d;
54 perspective:1000px;
55 transform:translate(-50%,-50%);
56 }
57
58 .bike-wrap{
59 position:absolute;
60 inset:0;
61 transform-style:preserve-3d;
62 animation: orbit 10s linear infinite;
63 }
64
65 .bike{
66 position:absolute;
67 left:50%;
68 top:50%;
69 width:320px;
70 height:190px;
71 margin-left:-160px;
72 margin-top:-95px;
73 transform-style:preserve-3d;
74 filter: drop-shadow(0 10px 6px rgba(0,0,0,.04));
75 }
76
77 .ground-shadow{
78 position:absolute;
79 left:50%;
80 top:50%;
81 width:250px;
82 height:26px;
83 margin-left:-125px;
84 margin-top:58px;
85 background:radial-gradient(ellipse at center, rgba(0,0,0,.12) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,0) 72%);
86 transform-origin:center;
87 animation: shadowOrbit 10s linear infinite;
88 filter: blur(1px);
89 }
90
91 .wheel{
92 position:absolute;
93 width:82px;
94 height:82px;
95 border:5px solid var(--rim);
96 border-radius:50%;
97 background:
98 radial-gradient(circle at center, transparent 0 7px, #bdbdd0 7px 8px, transparent 8px),
99 radial-gradient(circle at center, transparent 0 34px, rgba(255,255,255,.9) 34px 35px, transparent 35px);
100 overflow:hidden;
101 }
102 .wheel::before,
103 .wheel::after{
104 content:"";
105 position:absolute;
106 inset:0;
107 border-radius:50%;
108 }
109 .wheel::before{
110 background:
111 repeating-conic-gradient(from 0deg, rgba(120,120,150,.45) 0deg 2deg, transparent 2deg 15deg);
112 transform:rotate(0deg);
113 animation: spin 1.2s linear infinite;
114 opacity:.9;
115 }
116 .wheel::after{
117 inset:34px;
118 background:#d7d7e6;
119 border-radius:50%;
120 box-shadow:0 0 0 1px rgba(120,120,150,.5);
121 }
122
123 .rear{ left:42px; top:78px; }
124 .front{ left:232px; top:78px; }
125
126 .frame-line, .fork, .bar, .seat-post, .seat, .crank, .pedal, .stem{
127 position:absolute;
128 background:linear-gradient(180deg,var(--purple2),var(--purple));
129 border-radius:4px;
130 transform-origin:left center;
131 }
132
133 .frame-line{ height:7px; }
134 .fork{ width:7px; height:72px; }
135 .seat-post{ width:7px; height:58px; }
136 .stem{ width:7px; height:28px; }
137 .bar{ height:10px; border-radius:6px; }
138 .seat{
139 height:10px;
140 background:linear-gradient(180deg,#2b2b31,#111);
141 border-radius:3px 8px 3px 3px;
142 }
143 .crank{ width:6px; height:38px; }
144 .pedal{
145 width:16px; height:6px;
146 border-radius:3px;
147 }
148
149 .top-tube{ left:122px; top:56px; width:118px; transform:rotate(-6deg); }
150 .down-tube{ left:122px; top:62px; width:112px; transform:rotate(43deg); }
151 .seat-tube{ left:122px; top:58px; width:78px; transform:rotate(66deg); }
152 .chain-stay{ left:92px; top:118px; width:74px; transform:rotate(4deg); }
153 .seat-stay{ left:92px; top:118px; width:68px; transform:rotate(-63deg); }
154 .head-tube{ left:236px; top:48px; width:54px; transform:rotate(78deg); }
155 .fork-left{ left:258px; top:62px; transform:rotate(76deg); }
156 .fork-right{ left:262px; top:62px; transform:rotate(76deg); }
157
158 .seat-post{ left:122px; top:56px; transform:rotate(-66deg); }
159 .seat{ left:96px; top:42px; width:44px; transform:skewX(-18deg); }
160
161 .stem{ left:238px; top:44px; transform:rotate(-18deg); }
162 .bar{
163 left:232px; top:34px; width:46px;
164 transform:rotate(-12deg);
165 }
166 .bar::before,.bar::after{
167 content:"";
168 position:absolute;
169 width:8px; height:22px;
170 background:linear-gradient(180deg,var(--purple2),var(--purple));
171 border-radius:4px;
172 top:-2px;
173 }
174 .bar::before{ left:-1px; transform:rotate(18deg); }
175 .bar::after{ right:-1px; transform:rotate(-28deg); }
176
177 .crank{
178 left:176px; top:118px;
179 transform-origin:center 8px;
180 animation: pedal 1.2s linear infinite;
181 }
182 .crank::before{
183 content:"";
184 position:absolute;
185 left:-8px; top:6px;
186 width:22px; height:6px;
187 background:linear-gradient(180deg,var(--purple2),var(--purple));
188 border-radius:4px;
189 transform:rotate(90deg);
190 transform-origin:center;
191 }
192 .pedal.p1{ left:168px; top:150px; animation: pedalA 1.2s linear infinite; }
193 .pedal.p2{ left:168px; top:92px; animation: pedalB 1.2s linear infinite; }
194
195 .speed{
196 position:absolute;
197 inset:0;
198 pointer-events:none;
199 }
200 .speed span{
201 position:absolute;
202 height:3px;
203 background:linear-gradient(90deg, rgba(201,184,255,0), rgba(201,184,255,.9), rgba(201,184,255,0));
204 border-radius:3px;
205 opacity:0;
206 animation: streak 1.8s linear infinite;
207 }
208
209 .speed span:nth-child(1){ width:180px; left:55%; top:18%; transform:rotate(-18deg); animation-delay:-.2s;}
210 .speed span:nth-child(2){ width:120px; left:28%; top:72%; transform:rotate(8deg); animation-delay:-.8s;}
211 .speed span:nth-child(3){ width:160px; left:62%; top:78%; transform:rotate(6deg); animation-delay:-1.2s;}
212 .speed span:nth-child(4){ width:90px; left:68%; top:62%; transform:rotate(2deg); animation-delay:-.5s;}
213 .speed span:nth-child(5){ width:140px; left:18%; top:84%; transform:rotate(28deg); animation-delay:-1.5s;}
214 .speed span:nth-child(6){ width:110px; left:12%; top:26%; transform:rotate(62deg); animation-delay:-1s;}
215 .speed span:nth-child(7){ width:150px; left:72%; top:88%; transform:rotate(52deg); animation-delay:-.1s;}
216 .speed span:nth-child(8){ width:80px; left:74%; top:30%; transform:rotate(-58deg); animation-delay:-1.35s;}
217 .speed span:nth-child(9){ width:130px; left:34%; top:58%; transform:rotate(-4deg); animation-delay:-.65s;}
218 .speed span:nth-child(10){ width:100px; left:6%; top:52%; transform:rotate(24deg); animation-delay:-1.75s;}
219
220 @keyframes orbit{
221 0% { transform:rotateY(0deg) rotateX(0deg); }
222 100% { transform:rotateY(360deg) rotateX(0deg); }
223 }
224
225 @keyframes shadowOrbit{
226 0% { transform:translateX(0) scaleX(1.05) rotate(0deg); opacity:.55; }
227 25% { transform:translateX(8px) scaleX(.9) rotate(-8deg); opacity:.42; }
228 50% { transform:translateX(0) scaleX(.55) rotate(0deg); opacity:.28; }
229 75% { transform:translateX(-8px) scaleX(.9) rotate(8deg); opacity:.42; }
230 100% { transform:translateX(0) scaleX(1.05) rotate(0deg); opacity:.55; }
231 }
232
233 @keyframes spin{
234 to{ transform:rotate(360deg); }
235 }
236
237 @keyframes pedal{
238 to{ transform:rotate(360deg); }
239 }
240
241 @keyframes pedalA{
242 0% { transform:translate(0,0); }
243 25% { transform:translate(10px,-10px); }
244 50% { transform:translate(0,-20px); }
245 75% { transform:translate(-10px,-10px); }
246 100% { transform:translate(0,0); }
247 }
248
249 @keyframes pedalB{
250 0% { transform:translate(0,0); }
251 25% { transform:translate(-10px,10px); }
252 50% { transform:translate(0,20px); }
253 75% { transform:translate(10px,10px); }
254 100% { transform:translate(0,0); }
255 }
256
257 @keyframes streak{
258 0% { opacity:0; transform:translateX(120px) scaleX(.7) var(--r,none); }
259 15% { opacity:.75; }
260 70% { opacity:.45; }
261 100% { opacity:0; transform:translateX(-220px) scaleX(1.1) var(--r,none); }
262 }
263
264 /* keep proportions on smaller screens */
265 @media (max-width:700px){
266 .bike{
267 transform:scale(.78);
268 transform-origin:center;
269 }
270 }
271</style>
272</head>
273<body>
274 <div class="scene">
275 <div class="title">Bicycle</div>
276
277 <div class="speed">
278 <span></span><span></span><span></span><span></span><span></span>
279 <span></span><span></span><span></span><span></span><span></span>
280 </div>
281
282 <div class="world">
283 <div class="ground-shadow"></div>
284
285 <div class="bike-wrap">
286 <div class="bike">
287 <div class="wheel rear"></div>
288 <div class="wheel front"></div>
289
290 <div class="frame-line top-tube"></div>
291 <div class="frame-line down-tube"></div>
292 <div class="frame-line seat-tube"></div>
293 <div class="frame-line chain-stay"></div>
294 <div class="frame-line seat-stay"></div>
295 <div class="frame-line head-tube"></div>
296
297 <div class="fork fork-left"></div>
298 <div class="fork fork-right"></div>
299
300 <div class="seat-post"></div>
301 <div class="seat"></div>
302
303 <div class="stem"></div>
304 <div class="bar"></div>
305
306 <div class="crank"></div>
307 <div class="pedal p1"></div>
308 <div class="pedal p2"></div>
309 </div>
310 </div>
311 </div>
312 </div>
313
314<script>
315 // Add slight variation to streak timing/rotation while keeping deterministic layout.
316 document.querySelectorAll('.speed span').forEach((el, i) => {
317 const dur = 1.6 + (i % 5) * 0.22;
318 el.style.animationDuration = dur + 's';
319 });
320</script>
321</body>
322</html>