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 .spinner {
9 position: relative;
10 width: 200px;
11 height: 200px;
12 margin: 50px auto;
13 }
14 .arm {
15 position: absolute;
16 width: 10px;
17 height: 50px;
18 background-color: #663399;
19 border-radius: 10px;
20 transform-origin: bottom center;
21 }
22 </style>
23</head>
24<body>
25 <div class="spinner">
26 <!-- arms will be generated dynamically -->
27 </div>
28
29 <script>
30 const spinner = document.querySelector('.spinner');
31 const numArms = 8;
32 const armLength = 50;
33 const armWidth = 10;
34 const colors = ['#FF69B4', '#800080'];
35
36 // generate arms dynamically
37 for (let i = 0; i < numArms; i++) {
38 const arm = document.createElement('div');
39 arm.classList.add('arm');
40 arm.style.top = `${100 - armLength / 2}px`;
41 arm.style.left = `${100}px`;
42 arm.style.background = `linear-gradient(to bottom, ${colors[i % 2]}, ${colors[(i + 1) % 2]})`;
43 arm.style.transform = `rotate(${i * 45}deg)`;
44 spinner.appendChild(arm);
45 }
46
47 // animate the spinner
48 let angle = 0;
49 function animate() {
50 angle += 1;
51 const arms = document.querySelectorAll('.arm');
52 arms.forEach((arm, index) => {
53 arm.style.transform = `rotate(${angle + index * 45}deg)`;
54 });
55 requestAnimationFrame(animate);
56 }
57 animate();
58 </script>
59</body>
60</html>