← back to Only CSS: Porco Rosso "SAVOIA" (紅の豚)compare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Porco Rosso "SAVOIA" (紅の豚)
A 0.50T 0.49
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>Plane Animation</title>
7 <style>
8 body {
9 background-color: #000;
10 margin: 0;
11 overflow: hidden;
12 }
13 #plane {
14 position: absolute;
15 top: 50%;
16 left: 50%;
17 transform: translate(-50%, -50%);
18 width: 200px;
19 height: 200px;
20 background-color: #f00;
21 }
22 #propeller {
23 position: absolute;
24 top: 40%;
25 left: 45%;
26 transform: translate(-50%, -50%) rotate(0deg);
27 width: 50px;
28 height: 50px;
29 background-color: #0f0;
30 border-radius: 50%;
31 animation: spin 2s linear infinite;
32 }
33 #tail {
34 position: absolute;
35 top: 55%;
36 left: 60%;
37 transform: translate(-50%, -50%);
38 width: 20px;
39 height: 20px;
40 background-image: linear-gradient(to bottom, #ff0000, #ffffff, #0000ff, #008000);
41 }
42 @keyframes spin {
43 0% {
44 transform: translate(-50%, -50%) rotate(0deg);
45 }
46 100% {
47 transform: translate(-50%, -50%) rotate(360deg);
48 }
49 }
50 @keyframes fly {
51 0% {
52 transform: translate(-50%, -50%) rotate(0deg) translateX(0);
53 }
54 100% {
55 transform: translate(-50%, -50%) rotate(360deg) translateX(500px);
56 }
57 }
58 </style>
59</head>
60<body>
61 <div id="plane"></div>
62 <div id="propeller"></div>
63 <div id="tail"></div>
64 <script>
65 const plane = document.getElementById('plane');
66 const propeller = document.getElementById('propeller');
67 const tail = document.getElementById('tail');
68 plane.style.animation = 'fly 10s linear infinite';
69 propeller.style.animation = 'spin 2s linear infinite';
70 </script>
71</body>
72</html>