← back to Only CSS: Codevember #6 Money Stormcompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Codevember #6 Money Storm
A 0.52T 0.21
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>Money Falling</title>
7 <style>
8 body {
9 background-color: black;
10 margin: 0;
11 padding: 0;
12 overflow: hidden;
13 }
14 .money {
15 position: absolute;
16 width: 50px;
17 height: 20px;
18 background-color: #ccc;
19 color: green;
20 font-size: 14px;
21 text-align: center;
22 line-height: 20px;
23 border-radius: 5px;
24 }
25 </style>
26</head>
27<body>
28 <script>
29 const moneyCount = 100;
30 const moneyElements = [];
31
32 for (let i = 0; i < moneyCount; i++) {
33 const moneyElement = document.createElement('div');
34 moneyElement.classList.add('money');
35 moneyElement.textContent = '¥10,000';
36 moneyElement.style.left = `${Math.random() * 100}%`;
37 moneyElement.style.top = `${Math.random() * 100}%`;
38 document.body.appendChild(moneyElement);
39 moneyElements.push(moneyElement);
40 }
41
42 function update() {
43 moneyElements.forEach((moneyElement, index) => {
44 const randomX = Math.random() * 2 - 1;
45 const randomY = Math.random() * 2 - 1;
46 moneyElement.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${Math.random() * 360}deg)`;
47 });
48 requestAnimationFrame(update);
49 }
50
51 update();
52 </script>
53</body>
54</html>