Skip to content

Commit 8dba831

Browse files
afk-anantafk-anant
authored
add Neon Pulse Ring (#3239)
1 parent 7264034 commit 8dba831

3 files changed

Lines changed: 108 additions & 0 deletions

File tree

‎Art/afk-anant-Neon-Pulse-Ring/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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>Neon Pulse Ring</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="ring ring-1"></div>
12+
<div class="ring ring-2"></div>
13+
<div class="ring ring-3"></div>
14+
<div class="core"></div>
15+
</div>
16+
</body>
17+
</html>

‎Art/afk-anant-Neon-Pulse-Ring/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "neonpulse",
3+
"githubHandle": "afk-anant"
4+
}

‎Art/afk-anant-Neon-Pulse-Ring/styles.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
min-height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
13+
overflow: hidden;
14+
}
15+
16+
.container {
17+
position: relative;
18+
width: 300px;
19+
height: 300px;
20+
}
21+
22+
.ring {
23+
position: absolute;
24+
top: 50%;
25+
left: 50%;
26+
transform: translate(-50%, -50%);
27+
border-radius: 50%;
28+
border: 3px solid;
29+
animation: pulse 3s ease-in-out infinite;
30+
}
31+
32+
.ring-1 {
33+
width: 100px;
34+
height: 100px;
35+
border-color: #00f3ff;
36+
animation-delay: 0s;
37+
box-shadow: 0 0 20px #00f3ff, inset 0 0 20px #00f3ff;
38+
}
39+
40+
.ring-2 {
41+
width: 150px;
42+
height: 150px;
43+
border-color: #ff00ff;
44+
animation-delay: 1s;
45+
box-shadow: 0 0 20px #ff00ff, inset 0 0 20px #ff00ff;
46+
}
47+
48+
.ring-3 {
49+
width: 200px;
50+
height: 200px;
51+
border-color: #00ff88;
52+
animation-delay: 2s;
53+
box-shadow: 0 0 20px #00ff88, inset 0 0 20px #00ff88;
54+
}
55+
56+
.core {
57+
position: absolute;
58+
top: 50%;
59+
left: 50%;
60+
transform: translate(-50%, -50%);
61+
width: 40px;
62+
height: 40px;
63+
background: radial-gradient(circle, #fff, #00f3ff);
64+
border-radius: 50%;
65+
box-shadow: 0 0 40px #fff, 0 0 60px #00f3ff;
66+
animation: coreGlow 2s ease-in-out infinite alternate;
67+
}
68+
69+
@keyframes pulse {
70+
0%, 100% {
71+
transform: translate(-50%, -50%) scale(0.8);
72+
opacity: 0.3;
73+
}
74+
50% {
75+
transform: translate(-50%, -50%) scale(1.2);
76+
opacity: 1;
77+
}
78+
}
79+
80+
@keyframes coreGlow {
81+
0% {
82+
box-shadow: 0 0 40px #fff, 0 0 60px #00f3ff;
83+
}
84+
100% {
85+
box-shadow: 0 0 60px #fff, 0 0 90px #00f3ff, 0 0 120px #ff00ff;
86+
}
87+
}

0 commit comments

Comments
 (0)