← back to Only CSS: Bicyclecompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Bicycle
A 0.43T 0.22
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>Bicycle 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 .bicycle {
23 position: absolute;
24 width: 120px;
25 height: 100px;
26 top: 50%;
27 left: 50%;
28 transform: translate(-50%, -50%);
29 animation: rotate 4s ease-in-out infinite alternate;
30 }
31 .bicycle .frame {
32 position: absolute;
33 width: 100%;
34 height: 100%;
35 background-color: #8a2be2;
36 border-radius: 5px;
37 transform-origin: center;
38 }
39 .bicycle .wheel {
40 position: absolute;
41 width: 40px;
42 height: 40px;
43 border: 2px solid #000;
44 border-radius: 50%;
45 background-color: #fff;
46 transform-origin: center;
47 }
48 .bicycle .wheel.left {
49 left: 10px;
50 top: 50%;
51 transform: translateY(-50%) rotate(0deg);
52 }
53 .bicycle .wheel.right {
54 right: 10px;
55 top: 50%;
56 transform: translateY(-50%) rotate(0deg);
57 }
58 .bicycle .seat {
59 position: absolute;
60 width: 20px;
61 height: 10px;
62 background-color: #000;
63 top: 30px;
64 left: 50%;
65 transform: translateX(-50%);
66 }
67 .bicycle .handlebar {
68 position: absolute;
69 width: 20px;
70 height: 20px;
71 background-color: #8a2be2;
72 top: 10px;
73 left: 50%;
74 transform: translateX(-50%);
75 }
76 .bicycle .pedal {
77 position: absolute;
78 width: 10px;
79 height: 10px;
80 background-color: #000;
81 bottom: 20px;
82 left: 50%;
83 transform: translateX(-50%);
84 }
85 .bicycle .shadow {
86 position: absolute;
87 width: 100%;
88 height: 10px;
89 background-color: rgba(0, 0, 0, 0.2);
90 bottom: 0;
91 left: 0;
92 transform-origin: center;
93 }
94 .text {
95 position: absolute;
96 top: 50%;
97 left: 50%;
98 transform: translate(-50%, -50%);
99 font-size: 48px;
100 font-weight: bold;
101 color: #8a2be2;
102 text-align: center;
103 animation: pulse 2s ease-in-out infinite alternate;
104 }
105 @keyframes rotate {
106 0% {
107 transform: translate(-50%, -50%) rotate(0deg);
108 }
109 100% {
110 transform: translate(-50%, -50%) rotate(360deg);
111 }
112 }
113 @keyframes pulse {
114 0% {
115 transform: translate(-50%, -50%) scale(1);
116 }
117 100% {
118 transform: translate(-50%, -50%) scale(1.1);
119 }
120 }
121 @keyframes streak {
122 0% {
123 transform: translate(0, 0);
124 }
125 50% {
126 transform: translate(100px, 0);
127 }
128 100% {
129 transform: translate(0, 0);
130 }
131 }
132 </style>
133</head>
134<body>
135 <div class="container">
136 <div class="bicycle">
137 <div class="frame"></div>
138 <div class="wheel left"></div>
139 <div class="wheel right"></div>
140 <div class="seat"></div>
141 <div class="handlebar"></div>
142 <div class="pedal"></div>
143 <div class="shadow"></div>
144 </div>
145 <div class="text">Bicycle</div>
146 </div>
147
148 <script>
149 const bicycle = document.querySelector('.bicycle');
150 const text = document.querySelector('.text');
151
152 // Add streak animation
153 setInterval(() => {
154 const streak = document.createElement('div');
155 streak.style.position = 'absolute';
156 streak.style.width = '2px';
157 streak.style.height = '100px';
158 streak.style.backgroundColor = '#8a2be2';
159 streak.style.transform = 'translateX(0)';
160 streak.style.transition = 'transform 0.5s ease-in-out';
161 document.body.appendChild(streak);
162
163 setTimeout(() => {
164 streak.style.transform = 'translateX(200px)';
165 setTimeout(() => {
166 streak.remove();
167 }, 500);
168 }, 100);
169 }, 1000);
170
171 // Add rotation animation
172 setInterval(() => {
173 bicycle.style.animation = 'rotate 4s ease-in-out infinite alternate';
174 }, 2000);
175 </script>
176</body>
177</html>