Qwen3-VL-8B-Instruct

Only CSS: Porco Rosso "SAVOIA" (紅の豚)
A 0.52T 0.36
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Animated Red Plane</title>
6    <style>
7        body {
8            margin: 0;
9            display: flex;
10            justify-content: center;
11            align-items: center;
12            height: 100vh;
13            background: #1a1a2e;
14            overflow: hidden;
15        }
16        .plane {
17            position: absolute;
18            width: 200px;
19            height: 150px;
20            background: #e71d36;
21            transform-style: preserve-3d;
22            animation: rotatePlane 4s ease-in-out infinite;
23        }
24        .propeller {
25            position: absolute;
26            top: 50px;
27            left: 50px;
28            width: 30px;
29            height: 30px;
30            background: #ffcc00;
31            border-radius: 50%;
32            transform-origin: center;
33            animation: spinPropeller 1s ease-in-out infinite;
34        }
35        .propeller-blade {
36            position: absolute;
37            top: 0;
38            left: 0;
39            width: 100%;
40            height: 100%;
41            background: #8b4513;
42            transform-origin: center;
43            animation: spinPropeller 1s ease-in-out infinite;
44        }
45        .propeller-blade:nth-child(1) {
46            transform: rotate(0deg);
47        }
48        .propeller-blade:nth-child(2) {
49            transform: rotate(120deg);
50        }
51        .propeller-blade:nth-child(3) {
52            transform: rotate(240deg);
53        }
54        .tail {
55            position: absolute;
56            top: 100px;
57            right: 0;
58            width: 60px;
59            height: 60px;
60            background: #e71d36;
61            border-radius: 5px;
62        }
63        .tail-flag {
64            position: absolute;
65            top: 0;
66            left: 0;
67            width: 60px;
68            height: 60px;
69            background: linear-gradient(to right, #006400, #ffffff, #cc0000);
70            border-radius: 5px;
71        }
72        .wings {
73            position: absolute;
74            top: 0;
75            left: 0;
76            width: 100%;
77            height: 100%;
78            background: #e71d36;
79        }
80        .wing {
81            position: absolute;
82            top: 0;
83            left: 0;
84            width: 100%;
85            height: 100%;
86            background: #e71d36;
87        }
88        .wing:nth-child(1) {
89            transform: rotate(0deg);
90        }
91        .wing:nth-child(2) {
92            transform: rotate(180deg);
93        }
94        .window {
95            position: absolute;
96            top: 30px;
97            left: 100px;
98            width: 20px;
99            height: 20px;
100            background: #000;
101            border-radius: 50%;
102        }
103        .engine {
104            position: absolute;
105            top: 30px;
106            left: 100px;
107            width: 20px;
108            height: 20px;
109            background: #8b4513;
110            border-radius: 50%;
111        }
112        .engine-label {
113            position: absolute;
114            top: 30px;
115            left: 100px;
116            width: 20px;
117            height: 20px;
118            background: #ffffff;
119            border-radius: 50%;
120            display: flex;
121            justify-content: center;
122            align-items: center;
123            font-size: 12px;
124            color: #000;
125        }
126        @keyframes rotatePlane {
127            0% {
128                transform: rotateY(0deg) rotateX(0deg);
129            }
130            25% {
131                transform: rotateY(15deg) rotateX(10deg);
132            }
133            50% {
134                transform: rotateY(30deg) rotateX(20deg);
135            }
136            75% {
137                transform: rotateY(45deg) rotateX(30deg);
138            }
139            100% {
140                transform: rotateY(60deg) rotateX(40deg);
141            }
142        }
143        @keyframes spinPropeller {
144            0% {
145                transform: rotate(0deg);
146            }
147            100% {
148                transform: rotate(360deg);
149            }
150        }
151    </style>
152</head>
153<body>
154    <div class="plane">
155        <div class="propeller">
156            <div class="propeller-blade"></div>
157            <div class="propeller-blade"></div>
158            <div class="propeller-blade"></div>
159        </div>
160        <div class="tail">
161            <div class="tail-flag"></div>
162        </div>
163        <div class="wings">
164            <div class="wing"></div>
165            <div class="wing"></div>
166        </div>
167        <div class="window"></div>
168        <div class="engine">
169            <div class="engine-label">30</div>
170        </div>
171    </div>
172</body>
173</html>