← back to Only CSS: Truck a GO, GO! GOOOO!!compare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Truck a GO, GO! GOOOO!!
A 0.51T 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>Animation</title>
7 <style>
8 .car {
9 position: absolute;
10 width: 100px;
11 height: 50px;
12 background-color: #964B00;
13 border-radius: 10px;
14 transform-style: preserve-3d;
15 }
16 .car .body {
17 position: absolute;
18 width: 100%;
19 height: 100%;
20 background-color: #964B00;
21 }
22 .car .window {
23 position: absolute;
24 width: 40%;
25 height: 40%;
26 top: 20%;
27 left: 30%;
28 background-color: #ADD8E6;
29 }
30 .car .wheel {
31 position: absolute;
32 width: 10px;
33 height: 10px;
34 border-radius: 50%;
35 background-color: black;
36 }
37 .car .wheel:nth-child(1) {
38 top: 40px;
39 left: 20px;
40 }
41 .car .wheel:nth-child(2) {
42 top: 40px;
43 right: 20px;
44 }
45 .car .wheel:nth-child(3) {
46 top: 60px;
47 left: 20px;
48 }
49 .car .wheel:nth-child(4) {
50 top: 60px;
51 right: 20px;
52 }
53
54 @keyframes move {
55 0% {
56 transform: translate(0, 0) rotate(0deg);
57 }
58 10% {
59 transform: translate(100px, 0) rotate(10deg);
60 }
61 20% {
62 transform: translate(200px, 0) rotate(20deg);
63 }
64 30% {
65 transform: translate(300px, 0) rotate(30deg);
66 }
67 40% {
68 transform: translate(400px, 0) rotate(40deg);
69 }
70 50% {
71 transform: translate(500px, 0) rotate(50deg);
72 }
73 60% {
74 transform: translate(600px, 0) rotate(60deg);
75 }
76 70% {
77 transform: translate(700px, 0) rotate(70deg);
78 }
79 80% {
80 transform: translate(800px, 0) rotate(80deg);
81 }
82 90% {
83 transform: translate(900px, 0) rotate(90deg);
84 }
85 100% {
86 transform: translate(1000px, 0) rotate(100deg);
87 }
88 }
89
90 .animate {
91 animation: move 10s linear infinite;
92 }
93 </style>
94</head>
95<body>
96 <div class="car animate">
97 <div class="body"></div>
98 <div class="window"></div>
99 <div class="wheel"></div>
100 <div class="wheel"></div>
101 <div class="wheel"></div>
102 <div class="wheel"></div>
103 </div>
104</body>
105</html>