Skip to content

Commit 45e03bf

Browse files
Kavya-Jain-coderKavya-Jain-coder
authored
add Dna Helix (#3286)
* add Dna Helix * change foldername correctly
1 parent 8e18fa0 commit 45e03bf

3 files changed

Lines changed: 228 additions & 0 deletions

File tree

‎Art/Kavya-Jain-coder-DNA-Helix/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="dna-container">
11+
<div class="strand strand-left"></div>
12+
<div class="strand strand-right"></div>
13+
<div class="base base1"></div>
14+
<div class="base base2"></div>
15+
<div class="base base3"></div>
16+
<div class="base base4"></div>
17+
<div class="base base5"></div>
18+
<div class="base base6"></div>
19+
<div class="base base7"></div>
20+
<div class="base base8"></div>
21+
</div>
22+
</body>
23+
</html>

‎Art/Kavya-Jain-coder-DNA-Helix/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",
3+
"githubHandle": "Kavya-Jain-coder"
4+
}

‎Art/Kavya-Jain-coder-DNA-Helix/styles.css‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
13+
perspective: 1000px;
14+
}
15+
16+
.dna-container {
17+
position: relative;
18+
width: 300px;
19+
height: 500px;
20+
transform-style: preserve-3d;
21+
animation: rotateDNA 10s linear infinite;
22+
}
23+
24+
@keyframes rotateDNA {
25+
from {
26+
transform: rotateY(0deg);
27+
}
28+
to {
29+
transform: rotateY(360deg);
30+
}
31+
}
32+
33+
.strand {
34+
position: absolute;
35+
width: 10px;
36+
height: 100%;
37+
background: linear-gradient(to bottom,
38+
#00d4ff 0%,
39+
#0099cc 25%,
40+
#00d4ff 50%,
41+
#0099cc 75%,
42+
#00d4ff 100%);
43+
border-radius: 5px;
44+
box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
45+
}
46+
47+
.strand-left {
48+
left: 0;
49+
animation: waveLeft 4s ease-in-out infinite;
50+
}
51+
52+
.strand-right {
53+
right: 0;
54+
animation: waveRight 4s ease-in-out infinite;
55+
}
56+
57+
@keyframes waveLeft {
58+
0%, 100% {
59+
transform: translateX(0) translateZ(50px);
60+
}
61+
25% {
62+
transform: translateX(20px) translateZ(0px);
63+
}
64+
50% {
65+
transform: translateX(0) translateZ(-50px);
66+
}
67+
75% {
68+
transform: translateX(-20px) translateZ(0px);
69+
}
70+
}
71+
72+
@keyframes waveRight {
73+
0%, 100% {
74+
transform: translateX(0) translateZ(-50px);
75+
}
76+
25% {
77+
transform: translateX(-20px) translateZ(0px);
78+
}
79+
50% {
80+
transform: translateX(0) translateZ(50px);
81+
}
82+
75% {
83+
transform: translateX(20px) translateZ(0px);
84+
}
85+
}
86+
87+
.base {
88+
position: absolute;
89+
width: 280px;
90+
height: 6px;
91+
left: 10px;
92+
border-radius: 3px;
93+
transform-style: preserve-3d;
94+
}
95+
96+
.base::before,
97+
.base::after {
98+
content: '';
99+
position: absolute;
100+
width: 25px;
101+
height: 25px;
102+
border-radius: 50%;
103+
top: 50%;
104+
transform: translateY(-50%);
105+
}
106+
107+
.base::before {
108+
left: -7px;
109+
background: radial-gradient(circle at 30% 30%, #ff006e, #8b0049);
110+
box-shadow: 0 0 15px #ff006e;
111+
}
112+
113+
.base::after {
114+
right: -7px;
115+
background: radial-gradient(circle at 30% 30%, #00ff87, #00a152);
116+
box-shadow: 0 0 15px #00ff87;
117+
}
118+
119+
.base1 {
120+
top: 50px;
121+
background: linear-gradient(90deg, #ff006e, #00ff87);
122+
animation: baseRotate1 4s ease-in-out infinite;
123+
}
124+
125+
.base2 {
126+
top: 110px;
127+
background: linear-gradient(90deg, #ff006e, #00ff87);
128+
animation: baseRotate2 4s ease-in-out infinite;
129+
}
130+
131+
.base3 {
132+
top: 170px;
133+
background: linear-gradient(90deg, #ff006e, #00ff87);
134+
animation: baseRotate3 4s ease-in-out infinite;
135+
}
136+
137+
.base4 {
138+
top: 230px;
139+
background: linear-gradient(90deg, #ff006e, #00ff87);
140+
animation: baseRotate4 4s ease-in-out infinite;
141+
}
142+
143+
.base5 {
144+
top: 290px;
145+
background: linear-gradient(90deg, #ff006e, #00ff87);
146+
animation: baseRotate1 4s ease-in-out infinite;
147+
}
148+
149+
.base6 {
150+
top: 350px;
151+
background: linear-gradient(90deg, #ff006e, #00ff87);
152+
animation: baseRotate2 4s ease-in-out infinite;
153+
}
154+
155+
.base7 {
156+
top: 410px;
157+
background: linear-gradient(90deg, #ff006e, #00ff87);
158+
animation: baseRotate3 4s ease-in-out infinite;
159+
}
160+
161+
.base8 {
162+
top: 470px;
163+
background: linear-gradient(90deg, #ff006e, #00ff87);
164+
animation: baseRotate4 4s ease-in-out infinite;
165+
}
166+
167+
@keyframes baseRotate1 {
168+
0%, 100% {
169+
transform: rotateY(0deg) translateZ(0);
170+
}
171+
50% {
172+
transform: rotateY(180deg) translateZ(0);
173+
}
174+
}
175+
176+
@keyframes baseRotate2 {
177+
0%, 100% {
178+
transform: rotateY(45deg) translateZ(0);
179+
}
180+
50% {
181+
transform: rotateY(225deg) translateZ(0);
182+
}
183+
}
184+
185+
@keyframes baseRotate3 {
186+
0%, 100% {
187+
transform: rotateY(90deg) translateZ(0);
188+
}
189+
50% {
190+
transform: rotateY(270deg) translateZ(0);
191+
}
192+
}
193+
194+
@keyframes baseRotate4 {
195+
0%, 100% {
196+
transform: rotateY(135deg) translateZ(0);
197+
}
198+
50% {
199+
transform: rotateY(315deg) translateZ(0);
200+
}
201+
}

0 commit comments

Comments
 (0)