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>Rotating Star Animation</title>
7 <style>
8 body {
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background: #f5f5f5;
14 margin: 0;
15 }
16 .star {
17 position: relative;
18 width: 200px;
19 height: 200px;
20 animation: rotate 4s linear infinite;
21 }
22 .arm {
23 position: absolute;
24 width: 20px;
25 height: 100px;
26 background: linear-gradient(to bottom, #c743d9, #4a148c);
27 border-radius: 10px;
28 transform-origin: bottom center;
29 transition: transform 0.5s ease-out;
30 }
31 .arm:nth-child(1) { transform: rotate(0deg) translateY(-100px); }
32 .arm:nth-child(2) { transform: rotate(60deg) translateY(-100px); }
33 .arm:nth-child(3) { transform: rotate(120deg) translateY(-100px); }
34 .arm:nth-child(4) { transform: rotate(180deg) translateY(-100px); }
35 .arm:nth-child(5) { transform: rotate(240deg) translateY(-100px); }
36 .arm:nth-child(6) { transform: rotate(300deg) translateY(-100px); }
37 .arm:nth-child(7) { transform: rotate(360deg) translateY(-100px); }
38 .arm:nth-child(8) { transform: rotate(420deg) translateY(-100px); }
39 .arm:nth-child(9) { transform: rotate(480deg) translateY(-100px); }
40 .arm:nth-child(10) { transform: rotate(540deg) translateY(-100px); }
41 .arm:nth-child(11) { transform: rotate(600deg) translateY(-100px); }
42 .arm:nth-child(12) { transform: rotate(660deg) translateY(-100px); }
43
44 @keyframes rotate {
45 0% { transform: rotate(0deg); }
46 25% { transform: rotate(180deg); }
47 50% { transform: rotate(360deg); }
48 75% { transform: rotate(540deg); }
49 100% { transform: rotate(720deg); }
50 }
51 </style>
52</head>
53<body>
54 <div class="star">
55 <div class="arm"></div>
56 <div class="arm"></div>
57 <div class="arm"></div>
58 <div class="arm"></div>
59 <div class="arm"></div>
60 <div class="arm"></div>
61 <div class="arm"></div>
62 <div class="arm"></div>
63 <div class="arm"></div>
64 <div class="arm"></div>
65 <div class="arm"></div>
66 <div class="arm"></div>
67 </div>
68</body>
69</html>