← back to Only CSS: Screw 2compare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Screw 2
A 0.63T 0.28
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>Screw Animation</title>
7 <style>
8 body {
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background-color: #1a1a2e;
14 overflow: hidden;
15 }
16 .screw-text {
17 font-family: 'Courier New', monospace;
18 font-size: 120px;
19 font-weight: bold;
20 color: white;
21 text-transform: uppercase;
22 letter-spacing: 10px;
23 position: relative;
24 animation: spin 1.5s ease-in-out forwards;
25 }
26 @keyframes spin {
27 0% {
28 transform: rotate(0deg);
29 }
30 50% {
31 transform: rotate(180deg);
32 }
33 100% {
34 transform: rotate(360deg);
35 }
36 }
37 .screw-text::before {
38 content: "SCREW";
39 position: absolute;
40 top: 0;
41 left: 0;
42 width: 100%;
43 height: 100%;
44 background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
45 animation: pulse 1.5s ease-in-out infinite alternate;
46 }
47 @keyframes pulse {
48 0% {
49 transform: scale(1);
50 }
51 100% {
52 transform: scale(1.1);
53 }
54 }
55 </style>
56</head>
57<body>
58 <div class="screw-text">SCREW</div>
59</body>
60</html>