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: #000;
10 overflow: hidden;
11 }
12 .line {
13 position: absolute;
14 width: 2px;
15 height: 20px;
16 background: linear-gradient(to bottom, #fff, #00ffff);
17 transform-origin: bottom center;
18 }
19 </style>
20</head>
21<body>
22 <script>
23 const numLines = 50;
24 const lines = [];
25
26 for (let i = 0; i < numLines; i++) {
27 const line = document.createElement('div');
28 line.className = 'line';
29 line.style.top = `${Math.random() * 100}%`;
30 line.style.left = `${Math.random() * 100}%`;
31 line.style.transform = `translate(-50%, -50%) rotate(${Math.random() * 360}deg)`;
32 document.body.appendChild(line);
33 lines.push(line);
34 }
35
36 function animate() {
37 lines.forEach((line, index) => {
38 const angle = index * 10;
39 const distance = 100 + Math.random() * 200;
40 line.style.top = `${50 + Math.cos(Date.now() * 0.01 + angle * 0.1) * distance}px`;
41 line.style.left = `${50 + Math.sin(Date.now() * 0.01 + angle * 0.1) * distance}px`;
42 line.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
43 });
44 requestAnimationFrame(animate);
45 }
46 animate();
47 </script>
48</body>
49</html>