Skip to content

Commit c052177

Browse files
Aviral02gitAviral02git
authored
add DNA-Helix-Spiral (#3290)
* add DNA-Helix-Spiral * add DNA-Helix-Spiral
1 parent c70cc30 commit c052177

3 files changed

Lines changed: 220 additions & 0 deletions

File tree

‎Art/Aviral02git-DNA-Helix-Spiral/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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>DNA Helix Spiral</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="helix">
12+
<div class="strand strand-left">
13+
<div class="node n1"></div>
14+
<div class="node n2"></div>
15+
<div class="node n3"></div>
16+
<div class="node n4"></div>
17+
<div class="node n5"></div>
18+
<div class="node n6"></div>
19+
<div class="node n7"></div>
20+
<div class="node n8"></div>
21+
</div>
22+
<div class="strand strand-right">
23+
<div class="node n1"></div>
24+
<div class="node n2"></div>
25+
<div class="node n3"></div>
26+
<div class="node n4"></div>
27+
<div class="node n5"></div>
28+
<div class="node n6"></div>
29+
<div class="node n7"></div>
30+
<div class="node n8"></div>
31+
</div>
32+
<div class="connector c1"></div>
33+
<div class="connector c2"></div>
34+
<div class="connector c3"></div>
35+
<div class="connector c4"></div>
36+
<div class="connector c5"></div>
37+
<div class="connector c6"></div>
38+
<div class="connector c7"></div>
39+
<div class="connector c8"></div>
40+
</div>
41+
</div>
42+
</body>
43+
</html>

‎Art/Aviral02git-DNA-Helix-Spiral/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "DNA Helix Spiral",
3+
"githubHandle": "Aviral02git"
4+
}

‎Art/Aviral02git-DNA-Helix-Spiral/styles.css‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 50%, #0a0e27 100%);
9+
height: 100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
perspective: 1000px;
15+
}
16+
17+
.container {
18+
position: relative;
19+
width: 100%;
20+
height: 100%;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
}
25+
26+
.helix {
27+
position: relative;
28+
width: 300px;
29+
height: 500px;
30+
transform-style: preserve-3d;
31+
animation: rotateHelix 8s linear infinite;
32+
}
33+
34+
.strand {
35+
position: absolute;
36+
width: 100%;
37+
height: 100%;
38+
}
39+
40+
.strand-left {
41+
left: 0;
42+
}
43+
44+
.strand-right {
45+
right: 0;
46+
}
47+
48+
.node {
49+
position: absolute;
50+
width: 30px;
51+
height: 30px;
52+
border-radius: 50%;
53+
left: 50%;
54+
transform: translateX(-50%);
55+
}
56+
57+
.strand-left .node {
58+
background: linear-gradient(135deg, #00f5ff, #0080ff);
59+
box-shadow:
60+
0 0 20px #00f5ff,
61+
0 0 40px #0080ff,
62+
inset 0 0 10px #fff;
63+
animation: pulseLeft 2s ease-in-out infinite;
64+
}
65+
66+
.strand-right .node {
67+
background: linear-gradient(135deg, #ff006e, #ff4d94);
68+
box-shadow:
69+
0 0 20px #ff006e,
70+
0 0 40px #ff4d94,
71+
inset 0 0 10px #fff;
72+
animation: pulseRight 2s ease-in-out infinite;
73+
}
74+
75+
.strand-left .n1 { top: 0%; animation-delay: 0s; }
76+
.strand-left .n2 { top: 12.5%; animation-delay: 0.25s; }
77+
.strand-left .n3 { top: 25%; animation-delay: 0.5s; }
78+
.strand-left .n4 { top: 37.5%; animation-delay: 0.75s; }
79+
.strand-left .n5 { top: 50%; animation-delay: 1s; }
80+
.strand-left .n6 { top: 62.5%; animation-delay: 1.25s; }
81+
.strand-left .n7 { top: 75%; animation-delay: 1.5s; }
82+
.strand-left .n8 { top: 87.5%; animation-delay: 1.75s; }
83+
84+
.strand-right .n1 { top: 0%; animation-delay: 1s; }
85+
.strand-right .n2 { top: 12.5%; animation-delay: 1.25s; }
86+
.strand-right .n3 { top: 25%; animation-delay: 1.5s; }
87+
.strand-right .n4 { top: 37.5%; animation-delay: 1.75s; }
88+
.strand-right .n5 { top: 50%; animation-delay: 0s; }
89+
.strand-right .n6 { top: 62.5%; animation-delay: 0.25s; }
90+
.strand-right .n7 { top: 75%; animation-delay: 0.5s; }
91+
.strand-right .n8 { top: 87.5%; animation-delay: 0.75s; }
92+
93+
.connector {
94+
position: absolute;
95+
height: 3px;
96+
left: 50%;
97+
transform: translateX(-50%);
98+
background: linear-gradient(90deg,
99+
#00f5ff 0%,
100+
#7b2cbf 25%,
101+
#c77dff 50%,
102+
#e0aaff 75%,
103+
#ff006e 100%);
104+
box-shadow: 0 0 10px rgba(123, 44, 191, 0.8);
105+
animation: connector 2s ease-in-out infinite;
106+
}
107+
108+
.c1 { top: 0%; width: 0; animation-delay: 0s; }
109+
.c2 { top: 12.5%; width: 0; animation-delay: 0.25s; }
110+
.c3 { top: 25%; width: 0; animation-delay: 0.5s; }
111+
.c4 { top: 37.5%; width: 0; animation-delay: 0.75s; }
112+
.c5 { top: 50%; width: 0; animation-delay: 1s; }
113+
.c6 { top: 62.5%; width: 0; animation-delay: 1.25s; }
114+
.c7 { top: 75%; width: 0; animation-delay: 1.5s; }
115+
.c8 { top: 87.5%; width: 0; animation-delay: 1.75s; }
116+
117+
@keyframes rotateHelix {
118+
0% {
119+
transform: rotateY(0deg);
120+
}
121+
100% {
122+
transform: rotateY(360deg);
123+
}
124+
}
125+
126+
@keyframes pulseLeft {
127+
0%, 100% {
128+
transform: translateX(-150px) translateZ(0) scale(1);
129+
opacity: 1;
130+
}
131+
25% {
132+
transform: translateX(-100px) translateZ(50px) scale(1.2);
133+
opacity: 0.8;
134+
}
135+
50% {
136+
transform: translateX(-50px) translateZ(0) scale(1);
137+
opacity: 1;
138+
}
139+
75% {
140+
transform: translateX(-100px) translateZ(-50px) scale(0.8);
141+
opacity: 0.8;
142+
}
143+
}
144+
145+
@keyframes pulseRight {
146+
0%, 100% {
147+
transform: translateX(100px) translateZ(0) scale(1);
148+
opacity: 1;
149+
}
150+
25% {
151+
transform: translateX(50px) translateZ(-50px) scale(0.8);
152+
opacity: 0.8;
153+
}
154+
50% {
155+
transform: translateX(0px) translateZ(0) scale(1);
156+
opacity: 1;
157+
}
158+
75% {
159+
transform: translateX(50px) translateZ(50px) scale(1.2);
160+
opacity: 0.8;
161+
}
162+
}
163+
164+
@keyframes connector {
165+
0%, 100% {
166+
width: 0;
167+
opacity: 0;
168+
}
169+
50% {
170+
width: 200px;
171+
opacity: 1;
172+
}
173+
}

0 commit comments

Comments
 (0)