← back to Only CSS: Lovecompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Love
A 0.43T 0.42
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Love Heart Animation</title>
6 <style>
7 body {
8 background-color: black;
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 margin: 0;
14 overflow: hidden;
15 }
16 .heart {
17 position: relative;
18 width: 300px;
19 height: 300px;
20 transform: rotate(0deg);
21 animation: rotateHeart 10s linear infinite;
22 }
23 .word {
24 position: absolute;
25 font-size: 16px;
26 color: #fff;
27 text-shadow: 0 0 5px #ffcc00;
28 transform-origin: center;
29 opacity: 0;
30 animation: fadeIn 1s ease-in-out forwards;
31 }
32 .love {
33 position: absolute;
34 font-size: 36px;
35 color: red;
36 text-shadow: 0 0 5px #ff0000;
37 transform-origin: center;
38 opacity: 0;
39 animation: fadeIn 1s ease-in-out forwards;
40 }
41 @keyframes rotateHeart {
42 0% { transform: rotate(0deg); }
43 100% { transform: rotate(360deg); }
44 }
45 @keyframes fadeIn {
46 0% { opacity: 0; }
47 100% { opacity: 1; }
48 }
49 </style>
50</head>
51<body>
52 <div class="heart">
53 <div class="love">Love</div>
54 <div class="word" style="transform: rotate(0deg) translate(0px, 0px); animation-delay: 0s;">Amor</div>
55 <div class="word" style="transform: rotate(15deg) translate(0px, 0px); animation-delay: 0.1s;">Amour</div>
56 <div class="word" style="transform: rotate(30deg) translate(0px, 0px); animation-delay: 0.2s;">Amore</div>
57 <div class="word" style="transform: rotate(45deg) translate(0px, 0px); animation-delay: 0.3s;">Liebe</div>
58 <div class="word" style="transform: rotate(60deg) translate(0px, 0px); animation-delay: 0.4s;">Amor</div>
59 <div class="word" style="transform: rotate(75deg) translate(0px, 0px); animation-delay: 0.5s;">Amore</div>
60 <div class="word" style="transform: rotate(90deg) translate(0px, 0px); animation-delay: 0.6s;">Amour</div>
61 <div class="word" style="transform: rotate(105deg) translate(0px, 0px); animation-delay: 0.7s;">Amore</div>
62 <div class="word" style="transform: rotate(120deg) translate(0px, 0px); animation-delay: 0.8s;">Amor</div>
63 <div class="word" style="transform: rotate(135deg) translate(0px, 0px); animation-delay: 0.9s;">Amour</div>
64 <div class="word" style="transform: rotate(150deg) translate(0px, 0px); animation-delay: 1s;">Amore</div>
65 <div class="word" style="transform: rotate(165deg) translate(0px, 0px); animation-delay: 1.1s;">Amor</div>
66 <div class="word" style="transform: rotate(180deg) translate(0px, 0px); animation-delay: 1.2s;">Amour</div>
67 <div class="word" style="transform: rotate(195deg) translate(0px, 0px); animation-delay: 1.3s;">Amore</div>
68 <div class="word" style="transform: rotate(210deg) translate(0px, 0px); animation-delay: 1.4s;">Amor</div>
69 <div class="word" style="transform: rotate(225deg) translate(0px, 0px); animation-delay: 1.5s;">Amour</div>
70 <div class="word" style="transform: rotate(240deg) translate(0px, 0px); animation-delay: 1.6s;">Amore</div>
71 <div class="word" style="transform: rotate(255deg) translate(0px, 0px); animation-delay: 1.7s;">Amor</div>
72 <div class="word" style="transform: rotate(270deg) translate(0px, 0px); animation-delay: 1.8s;">Amour</div>
73 <div class="word" style="transform: rotate(285deg) translate(0px, 0px); animation-delay: 1.9s;">Amore</div>
74 <div class="word" style="transform: rotate(300deg) translate(0px, 0px); animation-delay: 2s;">Amor</div>
75 <div class="word" style="transform: rotate(315deg) translate(0px, 0px); animation-delay: 2.1s;">Amour</div>
76 <div class="word" style="transform: rotate(330deg) translate(0px, 0px); animation-delay: 2.2s;">Amore</div>
77 <div class="word" style="transform: rotate(345deg) translate(0px, 0px); animation-delay: 2.3s;">Amor</div>
78 <div class="word" style="transform: rotate(360deg) translate(0px, 0px); animation-delay: 2.4s;">Amour</div>
79 <div class="word" style="transform: rotate(375deg) translate(0px, 0px); animation-delay: 2.5s;">Amore</div>
80 <div class="word" style="transform: rotate(390deg) translate(0px, 0px); animation-delay: 2.6s;">Amor</div>
81 <div class="word" style="transform: rotate(405deg) translate(0px, 0px); animation-delay: 2.7s;">Amour</div>
82 <div class="word" style="transform: rotate(420deg) translate(0px, 0px); animation-delay: 2.8s;">Amore</div>
83 <div class="word" style="transform: rotate(435deg) translate(0px, 0px); animation-delay: 2.9s;">Amor</div>
84 <div class="word" style="transform: rotate(450deg) translate(0px, 0px); animation-delay: 3s;">Amour</div>
85 <div class="word" style="transform: rotate(465deg) translate(0px, 0px); animation-delay: 3.1s;">Amore</div>
86 <div class="word" style="transform: rotate(480deg) translate(0px, 0px); animation-delay: 3.2s;">Amor</div>
87 <div class="word" style="transform: rotate(495deg) translate(0px, 0px); animation-delay: 3.3s;">Amour</div>
88 <div class="word" style="transform: rotate(510deg) translate(0px, 0px); animation-delay: 3.4s;">Amore</div>
89 <div class="word" style="transform: rotate(525deg) translate(0px, 0px); animation-delay: 3.5s;">Amor</div>
90 <div class="word" style="transform: rotate(540deg) translate(0px, 0px); animation-delay: 3.6s;">Amour</div>
91 <div class="word" style="transform: rotate(555deg) translate(0px, 0px); animation-delay: 3.7s;">Amore</div>
92 <div class="word" style="transform: rotate(570deg) translate(0px, 0px); animation-delay: 3.8s;">Amor</div>
93 <div class="word" style="transform: rotate(585deg) translate(0px, 0px); animation-delay: 3.9s;">Amour</div>
94 <div class="word" style="transform: rotate(600deg) translate(0px, 0px); animation-delay: 4s;">Amore</div>
95 <div class="word" style="transform: rotate(615deg) translate(0px, 0px); animation-delay: 4.1s;">Amor</div>
96 <div class="word" style="transform: rotate(630deg) translate(0px, 0px); animation-delay: 4.2s;">Amour</div>
97 <div class="word" style="transform: rotate(645deg) translate(0px, 0px); animation-delay: 4.3s;">Amore</div>
98 <div class="word" style="transform: rotate(660deg) translate(0px, 0px); animation-delay: 4.4s;">Amor</div>
99 <div class="word" style="transform: rotate(675deg) translate(0px, 0px); animation-delay: 4.5s;">Amour</div>
100 <div class="word" style="transform: rotate(690deg) translate(0px, 0px); animation-delay: 4.6s;">Amore</div>
101 <div class="word" style="transform: rotate(705deg) translate(0px, 0px); animation-delay: 4.7s;">Amor</div>
102 <div class="word" style="transform: rotate(720deg) translate(0px, 0px); animation-delay: 4.8s;">Amour</div>
103 <div class="word" style="transform: rotate(735deg) translate(0px, 0px); animation-delay: 4.9s;">Amore</div>
104 <div class="word" style="transform: rotate(750deg) translate(0px, 0px); animation-delay: 5s;">Amor</div>
105 <div class="word" style="transform: rotate(765deg) translate(0px, 0px); animation-delay: 5.1s;">Amour</div>
106 <div class="word" style="transform: rotate(780deg) translate(0px, 0px); animation-delay: 5.2s;">Amore</div>
107 <div class="word" style="transform: rotate(795deg) translate(0px, 0px); animation-delay: 5.3s;">Amor</div>
108 <div class="word" style="transform: rotate(810deg) translate(0px, 0px); animation-delay: 5.4s;">Amour</div>
109 <div class="word" style="transform: rotate(825deg) translate(0px, 0px); animation-delay: 5.5s;">Amore</div>
110 <div class="word" style="transform: rotate(840deg) translate(0px, 0px); animation-delay: 5.6s;">Amor</div>
111 <div class="word" style="transform: rotate(855deg) translate(0px, 0px); animation-delay: 5.7s;">Amour</div>
112 <div class="word" style="transform: rotate(870deg) translate(0px, 0px); animation-delay: 5.8s;">Amore</div>
113 <div class="word" style="transform: rotate(885deg) translate(0px, 0px); animation-delay: 5.9s;">Amor</div>
114 <div class="word" style="transform: rotate(900deg) translate(0px, 0px); animation-delay: 6s;">Amour</div>
115 <div class="word" style="transform: rotate(915deg) translate(0px, 0px); animation-delay: 6.1s;">Amore</div>
116 <div class="word" style="transform: rotate(930deg) translate(0px, 0px); animation-delay: 6.2s;">Amor</div>
117 <div class="word" style="transform: rotate(945deg) translate(0px, 0px); animation-delay: 6.3s;">Amour</div>
118 <div class="word" style="transform: rotate(960deg) translate(0px, 0px); animation-delay: 6.4s;">Amore</div>
119 <div class="word" style="transform: rotate(975deg) translate(0px, 0px); animation-delay: 6.5s;">Amor</div>
120 <div class="word" style="transform: rotate(990deg) translate(0px, 0px); animation-delay: 6.6s;">Amour</div>
121 <div class="word" style="transform: rotate(1005deg) translate(0px, 0px); animation-delay: 6.7s;">Amore</div>
122 <div class="word" style="transform: rotate(1020deg) translate(0px, 0px); animation-delay: 6.8s;">Amor</div>
123 <div class="word" style="transform: rotate(1035deg) translate(0px, 0px); animation-delay: 6.9s;">Amour</div>
124 <div class="word" style="transform: rotate(1050deg) translate(0px, 0px); animation-delay: 7s;">Amore</div>
125 <div class="word" style="transform: rotate(1065deg) translate(0px, 0px); animation-delay: 7.1s;">Amor</div>
126 <div class="word" style="transform: rotate(1080deg) translate(0px, 0px); animation-delay: 7.2s;">Amour</div>
127 <div class="word" style="transform: rotate(1095deg) translate(0px, 0px); animation-delay: 7.3s;">Amore</div>
128 <div class="word" style="transform: rotate(1110deg) translate(0px, 0px); animation-delay: 7.4s;">Amor</div>
129 <div class="word" style="transform: rotate(1125deg) translate(0px, 0px); animation-delay: 7.5s;">Amour</div>
130 <div class="word" style="transform: rotate(1140deg) translate(0px, 0px); animation-delay: 7.6s;">Amore</div>
131 <div class="word" style="transform: rotate(1155deg) translate(0px, 0px); animation-delay: 7.7s;">Amor</div>
132 <div class="word" style="transform: rotate(1170deg) translate(0px, 0px); animation-delay: 7.8s;">Amour</div>
133 <div class="word" style="transform: rotate(1185deg) translate(0px, 0px); animation-delay: 7.9s;">Amore</div>
134 <div class="word" style="transform: rotate(1200deg) translate(0px, 0px); animation-delay: 8s;">Amor</div>
135 <div class="word" style="transform: rotate(1215deg) translate(0px, 0px); animation-delay: 8.1s;">Amour</div>
136 <div class="word" style="transform: rotate(1230deg) translate(0px, 0px); animation-delay: 8.2s;">Amore</div>
137 <div class="word" style="transform: rotate(1245deg) translate(0px, 0px); animation-delay: 8.3s;">Amor</div>
138 <div class="word" style="transform: rotate(1260deg) translate(0px, 0px); animation-delay: 8.4s;">Amour</div>
139 <div class="word" style="transform: rotate(1275deg) translate(0px, 0px); animation-delay: 8.5s;">Amore</div>
140 <div class="word" style="transform: rotate(1290deg) translate(0px, 0px); animation-delay: 8.6s;">Amor</div>
141 <div class="word" style="transform: rotate(1305deg) translate(0px, 0px); animation-delay: 8.7s;">Amour</div>
142 <div class="word" style="transform: rotate(1320deg) translate(0px, 0px); animation-delay: 8.8s;">Amore</div>
143 <div class="word" style="transform: rotate(1335deg) translate(0px, 0px); animation-delay: 8.9s;">Amor</div>
144 <div class="word" style="transform: rotate(1350deg) translate(0px, 0px); animation-delay: 9s;">Amour</div>
145 <div class="word" style="transform: rotate(1365deg) translate(0px, 0px); animation-delay: 9.1s;">Amore</div>
146 <div class="word" style="transform: rotate(1380deg) translate(0px, 0px); animation-delay: 9.2s;">Amor</div>
147 <div class="word" style="transform: rotate(1395deg) translate(0px, 0px); animation-delay: 9.3s;">Amour</div>
148 <div class="word" style="transform: rotate(1410deg) translate(0px, 0px); animation-delay: 9.4s;">Amore</div>
149 <div class="word" style="transform: rotate(1425deg) translate(0px, 0px); animation-delay: 9.5s;">Amor</div>
150 <div class="word" style="transform: rotate(1440deg) translate(0px, 0px); animation-delay: 9.6s;">Amour</div>
151 <div class="word" style="transform: rotate(1455deg) translate(0px, 0px); animation-delay: 9.7s;">Amore</div>
152 <div class="word" style="transform: rotate(1470deg) translate(0px, 0px); animation-delay: 9.8s;">Amor</div>
153 <div class="word" style="transform: rotate(1485deg) translate(0px, 0px); animation-delay: 9.9s;">Amour</div>
154 <div class="word" style="transform: rotate(1500deg) translate(0px, 0px); animation-delay: 10s;">Amore</div>
155 </div>
156</body>
157</html>