← back to Only CSS: Planet Ringcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Planet Ring
A 0.67T 0.20
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>Rotating Rings Animation</title>
7 <style>
8 body {
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background-color: #f0f4ff;
14 margin: 0;
15 overflow: hidden;
16 }
17 .container {
18 position: relative;
19 width: 300px;
20 height: 300px;
21 }
22 .center-circle {
23 position: absolute;
24 top: 50%;
25 left: 50%;
26 transform: translate(-50%, -50%);
27 width: 80px;
28 height: 80px;
29 background: linear-gradient(45deg, #ff6b35, #ff8c42);
30 border-radius: 50%;
31 border: 4px solid #000;
32 z-index: 10;
33 }
34 .ring {
35 position: absolute;
36 top: 50%;
37 left: 50%;
38 transform: translate(-50%, -50%);
39 width: 200px;
40 height: 200px;
41 border: 2px solid #333;
42 border-radius: 50%;
43 z-index: 5;
44 animation: rotate 3s linear infinite;
45 }
46 .ring:nth-child(2) {
47 animation-delay: 0.5s;
48 }
49 .ring:nth-child(3) {
50 animation-delay: 1s;
51 }
52 .ring:nth-child(4) {
53 animation-delay: 1.5s;
54 }
55 .ring:nth-child(5) {
56 animation-delay: 2s;
57 }
58 .ring:nth-child(6) {
59 animation-delay: 2.5s;
60 }
61 .ring:nth-child(7) {
62 animation-delay: 3s;
63 }
64 .ring:nth-child(8) {
65 animation-delay: 3.5s;
66 }
67 .ring:nth-child(9) {
68 animation-delay: 4s;
69 }
70 .ring:nth-child(10) {
71 animation-delay: 4.5s;
72 }
73 .ring:nth-child(11) {
74 animation-delay: 5s;
75 }
76 .ring:nth-child(12) {
77 animation-delay: 5.5s;
78 }
79 .ring:nth-child(13) {
80 animation-delay: 6s;
81 }
82 .ring:nth-child(14) {
83 animation-delay: 6.5s;
84 }
85 .ring:nth-child(15) {
86 animation-delay: 7s;
87 }
88 .ring:nth-child(16) {
89 animation-delay: 7.5s;
90 }
91 .ring:nth-child(17) {
92 animation-delay: 8s;
93 }
94 .ring:nth-child(18) {
95 animation-delay: 8.5s;
96 }
97 .ring:nth-child(19) {
98 animation-delay: 9s;
99 }
100 .ring:nth-child(20) {
101 animation-delay: 9.5s;
102 }
103 .ring:nth-child(21) {
104 animation-delay: 10s;
105 }
106 .ring:nth-child(22) {
107 animation-delay: 10.5s;
108 }
109 .ring:nth-child(23) {
110 animation-delay: 11s;
111 }
112 .ring:nth-child(24) {
113 animation-delay: 11.5s;
114 }
115 .ring:nth-child(25) {
116 animation-delay: 12s;
117 }
118 .ring:nth-child(26) {
119 animation-delay: 12.5s;
120 }
121 .ring:nth-child(27) {
122 animation-delay: 13s;
123 }
124 .ring:nth-child(28) {
125 animation-delay: 13.5s;
126 }
127 .ring:nth-child(29) {
128 animation-delay: 14s;
129 }
130 .ring:nth-child(30) {
131 animation-delay: 14.5s;
132 }
133 .ring:nth-child(31) {
134 animation-delay: 15s;
135 }
136 .ring:nth-child(32) {
137 animation-delay: 15.5s;
138 }
139 .ring:nth-child(33) {
140 animation-delay: 16s;
141 }
142 .ring:nth-child(34) {
143 animation-delay: 16.5s;
144 }
145 .ring:nth-child(35) {
146 animation-delay: 17s;
147 }
148 .ring:nth-child(36) {
149 animation-delay: 17.5s;
150 }
151 .ring:nth-child(37) {
152 animation-delay: 18s;
153 }
154 .ring:nth-child(38) {
155 animation-delay: 18.5s;
156 }
157 .ring:nth-child(39) {
158 animation-delay: 19s;
159 }
160 .ring:nth-child(40) {
161 animation-delay: 19.5s;
162 }
163 .ring:nth-child(41) {
164 animation-delay: 20s;
165 }
166 .ring:nth-child(42) {
167 animation-delay: 20.5s;
168 }
169 .ring:nth-child(43) {
170 animation-delay: 21s;
171 }
172 .ring:nth-child(44) {
173 animation-delay: 21.5s;
174 }
175 .ring:nth-child(45) {
176 animation-delay: 22s;
177 }
178 .ring:nth-child(46) {
179 animation-delay: 22.5s;
180 }
181 .ring:nth-child(47) {
182 animation-delay: 23s;
183 }
184 .ring:nth-child(48) {
185 animation-delay: 23.5s;
186 }
187 .ring:nth-child(49) {
188 animation-delay: 24s;
189 }
190 .ring:nth-child(50) {
191 animation-delay: 24.5s;
192 }
193 .ring:nth-child(51) {
194 animation-delay: 25s;
195 }
196 .ring:nth-child(52) {
197 animation-delay: 25.5s;
198 }
199 .ring:nth-child(53) {
200 animation-delay: 26s;
201 }
202 .ring:nth-child(54) {
203 animation-delay: 26.5s;
204 }
205 .ring:nth-child(55) {
206 animation-delay: 27s;
207 }
208 .ring:nth-child(56) {
209 animation-delay: 27.5s;
210 }
211 .ring:nth-child(57) {
212 animation-delay: 28s;
213 }
214 .ring:nth-child(58) {
215 animation-delay: 28.5s;
216 }
217 .ring:nth-child(59) {
218 animation-delay: 29s;
219 }
220 .ring:nth-child(60) {
221 animation-delay: 29.5s;
222 }
223 .ring:nth-child(61) {
224 animation-delay: 30s;
225 }
226 .ring:nth-child(62) {
227 animation-delay: 30.5s;
228 }
229 .ring:nth-child(63) {
230 animation-delay: 31s;
231 }
232 .ring:nth-child(64) {
233 animation-delay: 31.5s;
234 }
235 .ring:nth-child(65) {
236 animation-delay: 32s;
237 }
238 .ring:nth-child(66) {
239 animation-delay: 32.5s;
240 }
241 .ring:nth-child(67) {
242 animation-delay: 33s;
243 }
244 .ring:nth-child(68) {
245 animation-delay: 33.5s;
246 }
247 .ring:nth-child(69) {
248 animation-delay: 34s;
249 }
250 .ring:nth-child(70) {
251 animation-delay: 34.5s;
252 }
253 .ring:nth-child(71) {
254 animation-delay: 35s;
255 }
256 .ring:nth-child(72) {
257 animation-delay: 35.5s;
258 }
259 .ring:nth-child(73) {
260 animation-delay: 36s;
261 }
262 .ring:nth-child(74) {
263 animation-delay: 36.5s;
264 }
265 .ring:nth-child(75) {
266 animation-delay: 37s;
267 }
268 .ring:nth-child(76) {
269 animation-delay: 37.5s;
270 }
271 .ring:nth-child(77) {
272 animation-delay: 38s;
273 }
274 .ring:nth-child(78) {
275 animation-delay: 38.5s;
276 }
277 .ring:nth-child(79) {
278 animation-delay: 39s;
279 }
280 .ring:nth-child(80) {
281 animation-delay: 39.5s;
282 }
283 .ring:nth-child(81) {
284 animation-delay: 40s;
285 }
286 .ring:nth-child(82) {
287 animation-delay: 40.5s;
288 }
289 .ring:nth-child(83) {
290 animation-delay: 41s;
291 }
292 .ring:nth-child(84) {
293 animation-delay: 41.5s;
294 }
295 .ring:nth-child(85) {
296 animation-delay: 42s;
297 }
298 .ring:nth-child(86) {
299 animation-delay: 42.5s;
300 }
301 .ring:nth-child(87) {
302 animation-delay: 43s;
303 }
304 .ring:nth-child(88) {
305 animation-delay: 43.5s;
306 }
307 .ring:nth-child(89) {
308 animation-delay: 44s;
309 }
310 .ring:nth-child(90) {
311 animation-delay: 44.5s;
312 }
313 .ring:nth-child(91) {
314 animation-delay: 45s;
315 }
316 .ring:nth-child(92) {
317 animation-delay: 45.5s;
318 }
319 .ring:nth-child(93) {
320 animation-delay: 46s;
321 }
322 .ring:nth-child(94) {
323 animation-delay: 46.5s;
324 }
325 .ring:nth-child(95) {
326 animation-delay: 47s;
327 }
328 .ring:nth-child(96) {
329 animation-delay: 47.5s;
330 }
331 .ring:nth-child(97) {
332 animation-delay: 48s;
333 }
334 .ring:nth-child(98) {
335 animation-delay: 48.5s;
336 }
337 .ring:nth-child(99) {
338 animation-delay: 49s;
339 }
340 .ring:nth-child(100) {
341 animation-delay: 49.5s;
342 }
343 @keyframes rotate {
344 0% {
345 transform: translate(-50%, -50%) rotate(0deg);
346 }
347 100% {
348 transform: translate(-50%, -50%) rotate(360deg);
349 }
350 }
351 </style>
352</head>
353<body>
354 <div class="container">
355 <div class="center-circle"></div>
356 <div class="ring"></div>
357 </div>
358</body>
359</html>