Skip to content

Commit bd8078d

Browse files
awesome-kartikeyawesome-kartikey
authored
add Pulsing Rainbow Orb animation (#3267)
1 parent 86e3a58 commit bd8078d

3 files changed

Lines changed: 90 additions & 0 deletions

File tree

‎Art/awesome-kartikey-rainbow-orb/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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>Pulsing Rainbow Orb</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="orb-container">
11+
<div class="orb"></div>
12+
</div>
13+
</body>
14+
</html>

‎Art/awesome-kartikey-rainbow-orb/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "rainbow-orb",
3+
"githubHandle": "awesome-kartikey"
4+
}

‎Art/awesome-kartikey-rainbow-orb/styles.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
background: #0a0a15;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
}
15+
16+
.orb-container {
17+
position: relative;
18+
width: 200px;
19+
height: 200px;
20+
}
21+
22+
.orb {
23+
position: absolute;
24+
top: 50%;
25+
left: 50%;
26+
transform: translate(-50%, -50%);
27+
width: 120px;
28+
height: 120px;
29+
background: linear-gradient(45deg, #ff00aa, #ffcc00, #00ffaa);
30+
border-radius: 50%;
31+
box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
32+
animation: pulse 3s ease-in-out infinite, hueShift 6s linear infinite;
33+
}
34+
35+
@keyframes pulse {
36+
0%,
37+
100% {
38+
transform: translate(-50%, -50%) scale(1);
39+
box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
40+
}
41+
50% {
42+
transform: translate(-50%, -50%) scale(1.1);
43+
box-shadow: 0 0 60px rgba(255, 255, 255, 0.5);
44+
}
45+
}
46+
47+
@keyframes hueShift {
48+
0% {
49+
filter: hue-rotate(0deg);
50+
}
51+
100% {
52+
filter: hue-rotate(360deg);
53+
}
54+
}
55+
56+
@keyframes rotate {
57+
0% {
58+
background: linear-gradient(0deg, #ff00aa, #ffcc00, #00ffaa);
59+
}
60+
25% {
61+
background: linear-gradient(90deg, #00ffaa, #ff00aa, #ffcc00);
62+
}
63+
50% {
64+
background: linear-gradient(180deg, #ffcc00, #00ffaa, #ff00aa);
65+
}
66+
75% {
67+
background: linear-gradient(270deg, #ff00aa, #ffcc00, #00ffaa);
68+
}
69+
100% {
70+
background: linear-gradient(360deg, #ff00aa, #ffcc00, #00ffaa);
71+
}
72+
}

0 commit comments

Comments
 (0)