Skip to content

Commit 122a96f

Browse files
sarirefaelovsarirefaelov
committed
Add Neon Pulse animation
1 parent 4fb4f36 commit 122a96f

3 files changed

Lines changed: 46 additions & 0 deletions

File tree

‎Art/neonpulse/index.html‎

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

‎Art/neonpulse/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": "sarirefaelov"
4+
}

‎Art/neonpulse/styles.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
body {
2+
margin: 0;
3+
height: 100vh;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
background: #0d0d0d;
8+
overflow: hidden;
9+
}
10+
11+
.circle {
12+
width: 80px;
13+
height: 80px;
14+
border-radius: 50%;
15+
background: linear-gradient(45deg, #ff00ff, #00ffff, #ff0000);
16+
background-size: 600% 600%;
17+
box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff, 0 0 60px #ff0000;
18+
animation: pulse 2s ease-in-out infinite, colorShift 6s linear infinite;
19+
}
20+
21+
@keyframes pulse {
22+
0%, 100% { transform: scale(1); }
23+
50% { transform: scale(1.5); }
24+
}
25+
26+
@keyframes colorShift {
27+
0% { background-position: 0% 50%; }
28+
50% { background-position: 100% 50%; }
29+
100% { background-position: 0% 50%; }
30+
}

0 commit comments

Comments
 (0)