Skip to content

Commit df468fe

Browse files
AkshaySingh2005Akshay SinghLaurelineP
authored
Added robo animation (#2930)
Co-authored-by: Akshay Singh <[email protected]> Co-authored-by: Laureline Paris <[email protected]>
1 parent accd23f commit df468fe

File tree

3 files changed

+326
-0
lines changed

3 files changed

+326
-0
lines changed

‎Art/AkshaySingh2005-Robo/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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>Robot AI Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<!-- Robot Head -->
12+
<div class="robot-head">
13+
<!-- Eyes -->
14+
<div class="eyes">
15+
<div class="eye left-eye">
16+
<div class="scanner"></div>
17+
<div class="pupil"></div>
18+
</div>
19+
<div class="eye right-eye">
20+
<div class="scanner"></div>
21+
<div class="pupil"></div>
22+
</div>
23+
</div>
24+
25+
<!-- Mouth -->
26+
<div class="mouth">
27+
<div class="sound-wave"></div>
28+
<div class="sound-wave"></div>
29+
<div class="sound-wave"></div>
30+
<div class="sound-wave"></div>
31+
<div class="sound-wave"></div>
32+
</div>
33+
34+
<!-- Antennas -->
35+
<div class="antenna left-antenna">
36+
<div class="antenna-light"></div>
37+
</div>
38+
<div class="antenna right-antenna">
39+
<div class="antenna-light"></div>
40+
</div>
41+
</div>
42+
</div>
43+
</body>
44+
</html>

‎Art/AkshaySingh2005-Robo/meta.json‎

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

‎Art/AkshaySingh2005-Robo/styles.css‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
:root {
2+
--primary: #0cf;
3+
--secondary: #08a;
4+
--background: #111;
5+
--circuit: #0a3;
6+
--text: #0fc;
7+
--robot-head: #333;
8+
--robot-eye: #0cf;
9+
--robot-mouth: #08a;
10+
--antenna: #777;
11+
--antenna-light: #f55;
12+
}
13+
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
body {
21+
background-color: var(--background);
22+
overflow: hidden;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
height: 100vh;
27+
font-family: monospace;
28+
}
29+
30+
.container {
31+
position: relative;
32+
width: 100%;
33+
height: 100%;
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
37+
}
38+
39+
/* Robot Head */
40+
.robot-head {
41+
position: relative;
42+
width: 200px;
43+
height: 240px;
44+
background-color: var(--robot-head);
45+
border-radius: 30px;
46+
border: 4px solid #444;
47+
box-shadow: 0 0 20px rgba(0, 204, 255, 0.3);
48+
z-index: 10;
49+
animation: hover 3s ease-in-out infinite;
50+
}
51+
52+
@keyframes hover {
53+
0%, 100% { transform: translateY(0); }
54+
50% { transform: translateY(-10px); }
55+
}
56+
57+
/* Eyes */
58+
.eyes {
59+
display: flex;
60+
justify-content: space-around;
61+
margin-top: 50px;
62+
}
63+
64+
.eye {
65+
width: 60px;
66+
height: 40px;
67+
background-color: #222;
68+
border-radius: 10px;
69+
position: relative;
70+
overflow: hidden;
71+
border: 2px solid #444;
72+
}
73+
74+
.scanner {
75+
position: absolute;
76+
width: 4px;
77+
height: 100%;
78+
background-color: var(--robot-eye);
79+
left: 0;
80+
top: 0;
81+
animation: scan 2s linear infinite;
82+
box-shadow: 0 0 10px var(--robot-eye);
83+
}
84+
85+
@keyframes scan {
86+
0% { left: 0; }
87+
100% { left: 100%; }
88+
}
89+
90+
.pupil {
91+
position: absolute;
92+
width: 20px;
93+
height: 20px;
94+
background-color: var(--robot-eye);
95+
border-radius: 50%;
96+
top: 50%;
97+
left: 50%;
98+
transform: translate(-50%, -50%);
99+
animation: pulse 2s ease-in-out infinite;
100+
}
101+
102+
@keyframes pulse {
103+
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
104+
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
105+
}
106+
107+
/* Mouth */
108+
.mouth {
109+
width: 120px;
110+
height: 30px;
111+
background-color: #222;
112+
margin: 40px auto 0;
113+
border-radius: 5px;
114+
display: flex;
115+
justify-content: space-around;
116+
align-items: center;
117+
padding: 0 10px;
118+
border: 2px solid #444;
119+
overflow: hidden;
120+
}
121+
122+
.sound-wave {
123+
width: 4px;
124+
height: 5px;
125+
background-color: var(--robot-mouth);
126+
animation: soundWave 0.5s ease-in-out infinite;
127+
}
128+
129+
.sound-wave:nth-child(2) { animation-delay: 0.1s; }
130+
.sound-wave:nth-child(3) { animation-delay: 0.2s; }
131+
.sound-wave:nth-child(4) { animation-delay: 0.3s; }
132+
.sound-wave:nth-child(5) { animation-delay: 0.4s; }
133+
134+
@keyframes soundWave {
135+
0%, 100% { height: 5px; }
136+
50% { height: 20px; }
137+
}
138+
139+
/* Antennas */
140+
.antenna {
141+
position: absolute;
142+
width: 8px;
143+
height: 30px;
144+
background-color: var(--antenna);
145+
top: -30px;
146+
border-radius: 4px;
147+
}
148+
149+
.left-antenna {
150+
left: 50px;
151+
}
152+
153+
.right-antenna {
154+
right: 50px;
155+
}
156+
157+
.antenna-light {
158+
position: absolute;
159+
width: 12px;
160+
height: 12px;
161+
background-color: var(--antenna-light);
162+
border-radius: 50%;
163+
top: -6px;
164+
left: -2px;
165+
animation: blink 1.5s ease-in-out infinite alternate;
166+
}
167+
168+
.right-antenna .antenna-light {
169+
animation-delay: 0.75s;
170+
}
171+
172+
@keyframes blink {
173+
0%, 80% { opacity: 1; box-shadow: 0 0 10px var(--antenna-light); }
174+
100% { opacity: 0.3; box-shadow: 0 0 2px var(--antenna-light); }
175+
}
176+
177+
/* Circuit Board */
178+
.circuit-board {
179+
position: absolute;
180+
width: 100%;
181+
height: 100%;
182+
z-index: 1;
183+
}
184+
185+
.circuit {
186+
position: absolute;
187+
background-color: var(--circuit);
188+
box-shadow: 0 0 5px var(--circuit);
189+
}
190+
191+
.line-1 {
192+
width: 2px;
193+
height: 30%;
194+
top: 10%;
195+
left: 20%;
196+
animation: circuitPulse 3s infinite;
197+
}
198+
199+
.line-2 {
200+
width: 15%;
201+
height: 2px;
202+
top: 40%;
203+
left: 20%;
204+
animation: circuitPulse 3s infinite 0.5s;
205+
}
206+
207+
.line-3 {
208+
width: 2px;
209+
height: 25%;
210+
top: 40%;
211+
left: 35%;
212+
animation: circuitPulse 3s infinite 1s;
213+
}
214+
215+
.line-4 {
216+
width: 2px;
217+
height: 30%;
218+
top: 10%;
219+
right: 20%;
220+
animation: circuitPulse 3s infinite 1.5s;
221+
}
222+
223+
.line-5 {
224+
width: 15%;
225+
height: 2px;
226+
top: 40%;
227+
right: 20%;
228+
animation: circuitPulse 3s infinite 2s;
229+
}
230+
231+
.line-6 {
232+
width: 2px;
233+
height: 25%;
234+
top: 40%;
235+
right: 35%;
236+
animation: circuitPulse 3s infinite 2.5s;
237+
}
238+
239+
@keyframes circuitPulse {
240+
0%, 100% { opacity: 0.3; }
241+
50% { opacity: 1; }
242+
}
243+
244+
.node {
245+
position: absolute;
246+
width: 8px;
247+
height: 8px;
248+
background-color: var(--circuit);
249+
border-radius: 50%;
250+
box-shadow: 0 0 5px var(--circuit);
251+
animation: nodePulse 2s infinite;
252+
}
253+
254+
.node-1 { top: 10%; left: 20%; animation-delay: 0.2s; }
255+
.node-2 { top: 40%; left: 20%; animation-delay: 0.7s; }
256+
.node-3 { top: 65%; left: 35%; animation-delay: 1.2s; }
257+
.node-4 { top: 10%; right: 20%; animation-delay: 1.7s; }
258+
.node-5 { top: 40%; right: 20%; animation-delay: 2.2s; }
259+
.node-6 { top: 65%; right: 35%; animation-delay: 2.7s; }
260+
261+
@keyframes nodePulse {
262+
0%, 100% { transform: scale(1); opacity: 0.7; }
263+
50% { transform: scale(1.5); opacity: 1; }
264+
}
265+
266+
267+
268+
269+
270+
271+
272+
273+
274+
275+
276+
277+

0 commit comments

Comments
 (0)