Skip to content

Commit 1a95be7

Browse files
vs-code06LaurelineP
vs-code06
and
LaurelineP
authored
Hologram Ripple Grid (#3233)
* temporal-ripples * Temporal Ripples * Fractal Bloom * Quantum Tunnel * Temporal Ripples * Neon DNA * folder name change * Add animation 6 --------- Co-authored-by: Laureline Paris <laurelinedev@gmail.com>
1 parent 4044e0f commit 1a95be7

3 files changed

Lines changed: 80 additions & 0 deletions

File tree

‎Art/vs-code06-HologramRippleGrid/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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>Hologram Ripple Grid</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="grid">
11+
<div></div><div></div><div></div><div></div><div></div>
12+
<div></div><div></div><div></div><div></div><div></div>
13+
<div></div><div></div><div></div><div></div><div></div>
14+
<div></div><div></div><div></div><div></div><div></div>
15+
<div></div><div></div><div></div><div></div><div></div>
16+
</div>
17+
</body>
18+
</html>

‎Art/vs-code06-HologramRippleGrid/meta.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"githubHandle": "vs-code06",
3+
"artName": "Hologram Ripple Grid"
4+
}
5+

‎Art/vs-code06-HologramRippleGrid/styles.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body {
2+
margin: 0;
3+
height: 100vh;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
background: #020612;
8+
}
9+
10+
.grid {
11+
width: 250px;
12+
height: 250px;
13+
display: grid;
14+
grid-template-columns: repeat(5, 1fr);
15+
grid-gap: 10px;
16+
}
17+
18+
.grid div {
19+
width: 30px;
20+
height: 30px;
21+
background: #00eaff;
22+
border-radius: 50%;
23+
opacity: 0.3;
24+
animation: pulse 2.2s infinite ease-in-out;
25+
box-shadow: 0 0 10px #00eaff;
26+
}
27+
28+
@keyframes pulse {
29+
0%, 100% { transform: scale(0.6); opacity: 0.3; }
30+
50% { transform: scale(1.4); opacity: 1; }
31+
}
32+
33+
.grid div:nth-child(1) { animation-delay: 0s; }
34+
.grid div:nth-child(2) { animation-delay: .1s; }
35+
.grid div:nth-child(3) { animation-delay: .2s; }
36+
.grid div:nth-child(4) { animation-delay: .3s; }
37+
.grid div:nth-child(5) { animation-delay: .4s; }
38+
.grid div:nth-child(6) { animation-delay: .5s; }
39+
.grid div:nth-child(7) { animation-delay: .6s; }
40+
.grid div:nth-child(8) { animation-delay: .7s; }
41+
.grid div:nth-child(9) { animation-delay: .8s; }
42+
.grid div:nth-child(10) { animation-delay: .9s; }
43+
.grid div:nth-child(11) { animation-delay: 1s; }
44+
.grid div:nth-child(12) { animation-delay: 1.1s; }
45+
.grid div:nth-child(13) { animation-delay: 1.2s; }
46+
.grid div:nth-child(14) { animation-delay: 1.3s; }
47+
.grid div:nth-child(15) { animation-delay: 1.4s; }
48+
.grid div:nth-child(16) { animation-delay: 1.5s; }
49+
.grid div:nth-child(17) { animation-delay: 1.6s; }
50+
.grid div:nth-child(18) { animation-delay: 1.7s; }
51+
.grid div:nth-child(19) { animation-delay: 1.8s; }
52+
.grid div:nth-child(20) { animation-delay: 1.9s; }
53+
.grid div:nth-child(21) { animation-delay: 2s; }
54+
.grid div:nth-child(22) { animation-delay: 2.1s; }
55+
.grid div:nth-child(23) { animation-delay: 2.2s; }
56+
.grid div:nth-child(24) { animation-delay: 2.3s; }
57+
.grid div:nth-child(25) { animation-delay: 2.4s; }

0 commit comments

Comments
 (0)