← back to Only CSS: Responsive City Drone View Blackcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Responsive City Drone View Black
A 0.57T 0.32
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>Spinning Bars Animation</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 0;
11 background-color: black;
12 overflow: hidden;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 height: 100vh;
17 }
18 .container {
19 position: relative;
20 width: 200px;
21 height: 200px;
22 }
23 .bar {
24 position: absolute;
25 width: 10px;
26 height: 100px;
27 background: linear-gradient(to bottom, #1a1a1a, #000);
28 border-radius: 5px;
29 transform-origin: bottom center;
30 animation: spin 4s linear infinite;
31 }
32 .bar:nth-child(1) {
33 top: 50px;
34 left: 50px;
35 transform: rotate(0deg);
36 animation-delay: 0s;
37 }
38 .bar:nth-child(2) {
39 top: 50px;
40 right: 50px;
41 transform: rotate(45deg);
42 animation-delay: 0.2s;
43 }
44 .bar:nth-child(3) {
45 bottom: 50px;
46 right: 50px;
47 transform: rotate(90deg);
48 animation-delay: 0.4s;
49 }
50 .bar:nth-child(4) {
51 bottom: 50px;
52 left: 50px;
53 transform: rotate(135deg);
54 animation-delay: 0.6s;
55 }
56 .bar:nth-child(5) {
57 top: 50px;
58 left: 50px;
59 transform: rotate(180deg);
60 animation-delay: 0.8s;
61 }
62 .bar:nth-child(6) {
63 top: 50px;
64 right: 50px;
65 transform: rotate(225deg);
66 animation-delay: 1.0s;
67 }
68 .bar:nth-child(7) {
69 bottom: 50px;
70 right: 50px;
71 transform: rotate(270deg);
72 animation-delay: 1.2s;
73 }
74 .bar:nth-child(8) {
75 bottom: 50px;
76 left: 50px;
77 transform: rotate(315deg);
78 animation-delay: 1.4s;
79 }
80 @keyframes spin {
81 0% {
82 transform: rotate(0deg);
83 }
84 100% {
85 transform: rotate(360deg);
86 }
87 }
88 </style>
89</head>
90<body>
91 <div class="container">
92 <div class="bar"></div>
93 <div class="bar"></div>
94 <div class="bar"></div>
95 <div class="bar"></div>
96 <div class="bar"></div>
97 <div class="bar"></div>
98 <div class="bar"></div>
99 <div class="bar"></div>
100 </div>
101</body>
102</html>