Skip to content

Commit 6f694a7

Browse files
Catrina-WLaurelineP
Catrina-W
and
LaurelineP
authored
Created JackOlantern animation (#2862)
Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
1 parent 86744d0 commit 6f694a7

File tree

3 files changed

+163
-0
lines changed

3 files changed

+163
-0
lines changed

‎Art/Catrina-W-JackOLantern/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Pumpkin</title>
5+
<link rel="stylesheet" type="text/css" href="styles.css">
6+
</head>
7+
<body>
8+
<div class="container">
9+
<div class="leftEye"></div>
10+
<div class="rightEye"></div>
11+
<div class="mouth"></div>
12+
<div class="pumpkin">
13+
<span></span>
14+
<span></span>
15+
<span></span>
16+
<span></span>
17+
<span></span>
18+
</div>
19+
</div>
20+
</body>
21+
</html>

‎Art/Catrina-W-JackOLantern/meta.json

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

‎Art/Catrina-W-JackOLantern/styles.css

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
html, body { height: 100%; }
2+
3+
.container {
4+
height: 600px;
5+
background: #85edf2;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
animation-name: background;
10+
animation-duration: 4s;
11+
animation-iteration-count: infinite;
12+
animation-direction: alternate;
13+
animation-timing-function: linear;
14+
}
15+
16+
@keyframes background {
17+
0% {background-color: #85edf2;}
18+
100% {background-color: #030200;}
19+
}
20+
21+
.pumpkin {
22+
position: absolute;
23+
background: red;
24+
width: 250px;
25+
height: 330px;
26+
border-radius: 50%;
27+
}
28+
29+
.pumpkin span {
30+
position: absolute;
31+
background: #f5980c;
32+
display: block;
33+
width: 250px;
34+
height: 320px;
35+
border-radius: 50%;
36+
margin-left: -90px;
37+
transform: rotate(10deg);
38+
border: 8px solid brown;
39+
}
40+
41+
.pumpkin span:nth-child(1) {
42+
background: #f5980c;
43+
width: 250px;
44+
height: 320px;
45+
transform: rotate(-10deg);
46+
left: 180px;
47+
z-index: 3;
48+
border: 8px solid brown;
49+
}
50+
51+
.pumpkin span:nth-child(2) {
52+
background: #f5980c;
53+
width: 250px;
54+
height: 310px;
55+
transform: rotate(-10deg);
56+
left: 230px;
57+
border: 8px solid brown;
58+
}
59+
60+
.pumpkin span:nth-child(3) {
61+
background: #f5980c;
62+
width: 250px;
63+
height: 310px;
64+
left: -55px;
65+
transform: rotate(10deg);
66+
border: 8px solid brown;
67+
}
68+
69+
.pumpkin span:nth-child(4) {
70+
background: #f5980c;
71+
width: 250px;
72+
height: 340px;
73+
left: 85px;
74+
z-index: 4;
75+
top: -5px;
76+
transform: rotate(0deg);
77+
border: 8px solid brown;
78+
}
79+
80+
81+
.leftEye {
82+
margin-top: -90px;
83+
margin-right: 40px;
84+
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
85+
}
86+
87+
.rightEye {
88+
margin-top: -90px;
89+
margin-right: -158px;
90+
}
91+
92+
.leftEye, .rightEye {
93+
width: 0;
94+
height: 0;
95+
border-left: 40px solid transparent;
96+
border-right: 40px solid transparent;
97+
border-bottom: 80px solid #f5980c;
98+
z-index: 7;
99+
animation-name: eyes;
100+
animation-duration: 4s;
101+
animation-iteration-count: infinite;
102+
animation-direction: alternate;
103+
animation-timing-function: linear;
104+
}
105+
106+
.mouth {
107+
height: 50px;
108+
width: 50px;
109+
background-color: #f5980c;
110+
border-radius: 50%;
111+
z-index: 8;
112+
margin-top: 130px;
113+
margin-right: 100px;
114+
animation-name: mouth;
115+
animation-duration: 4s;
116+
animation-iteration-count: infinite;
117+
animation-direction: alternate;
118+
animation-timing-function: linear;
119+
}
120+
121+
122+
@keyframes eyes {
123+
0% {
124+
border-bottom: 80px solid #f5980c;
125+
}
126+
100% {
127+
border-bottom: 80px solid black;
128+
}
129+
}
130+
131+
@keyframes mouth {
132+
0% {
133+
background-color: #f5980c;
134+
}
135+
100% {
136+
background-color: black;
137+
}
138+
}

0 commit comments

Comments
 (0)