LLaMA 4 Scout

Only CSS: Responsive City Drone View Black
A 0.54T 0.43
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        body {
9            background-color: black;
10            margin: 0;
11            overflow: hidden;
12        }
13        .bar {
14            position: absolute;
15            background-color: gray;
16            transition: 1s;
17        }
18    </style>
19</head>
20<body>
21    <script>
22        // Number of bars
23        const numBars = 20;
24
25        // Create bars
26        for (let i = 0; i < numBars; i++) {
27            const bar = document.createElement('div');
28            bar.className = 'bar';
29            bar.style.width = '20px';
30            bar.style.height = '100px';
31            bar.style.left = `${Math.random() * 100}%`;
32            bar.style.top = `${Math.random() * 100}%`;
33            bar.style.transform = `translate(-50%, -50%) rotate(${Math.random() * 360}deg)`;
34            document.body.appendChild(bar);
35        }
36
37        // Animate bars
38        const bars = document.querySelectorAll('.bar');
39        let angle = 0;
40        function animate() {
41            angle += 1;
42            bars.forEach((bar, index) => {
43                bar.style.transform = `translate(-50%, -50%) rotate(${angle + index * 10}deg)`;
44            });
45            requestAnimationFrame(animate);
46        }
47        animate();
48    </script>
49</body>
50</html>