Skip to content

Commit c67f335

Browse files
rajatrsrivastavrajatrsrivastav
authored
added Electric-Border-Animation (#3276)
1 parent 672e377 commit c67f335

3 files changed

Lines changed: 96 additions & 0 deletions

File tree

‎Art/rajatrsrivastav-Electric-Border-Animation/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>Electric Border</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="electric-box">
11+
<div class="border-runner"></div>
12+
</div>
13+
</body>
14+
</html>

‎Art/rajatrsrivastav-Electric-Border-Animation/meta.json‎

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

‎Art/rajatrsrivastav-Electric-Border-Animation/styles.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: #0a0a0a;
9+
height: 100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
}
15+
16+
.electric-box {
17+
position: relative;
18+
width: 300px;
19+
height: 300px;
20+
background: linear-gradient(45deg, #1a1a2e, #16213e);
21+
border-radius: 20px;
22+
overflow: hidden;
23+
}
24+
25+
.border-runner {
26+
position: absolute;
27+
width: 100%;
28+
height: 100%;
29+
border: 4px solid transparent;
30+
border-radius: 20px;
31+
animation: electricBorder 3s linear infinite;
32+
}
33+
34+
.border-runner::before {
35+
content: '';
36+
position: absolute;
37+
top: -4px;
38+
left: -4px;
39+
right: -4px;
40+
bottom: -4px;
41+
background: linear-gradient(
42+
90deg,
43+
transparent,
44+
transparent,
45+
#00f3ff,
46+
#00f3ff,
47+
transparent,
48+
transparent
49+
);
50+
animation: rotateBorder 3s linear infinite;
51+
border-radius: 20px;
52+
}
53+
54+
.border-runner::after {
55+
content: '';
56+
position: absolute;
57+
inset: 4px;
58+
background: linear-gradient(45deg, #1a1a2e, #16213e);
59+
border-radius: 16px;
60+
}
61+
62+
@keyframes rotateBorder {
63+
0% {
64+
transform: rotate(0deg);
65+
}
66+
100% {
67+
transform: rotate(360deg);
68+
}
69+
}
70+
71+
@keyframes electricBorder {
72+
0%, 100% {
73+
filter: hue-rotate(0deg) brightness(1);
74+
}
75+
50% {
76+
filter: hue-rotate(180deg) brightness(1.5);
77+
}
78+
}

0 commit comments

Comments
 (0)