Skip to content

Commit 4a49b8a

Browse files
EstherKalEstherKal
authored
Add two animations (#2898)
1 parent 1f104cc commit 4a49b8a

File tree

6 files changed

+173
-0
lines changed

6 files changed

+173
-0
lines changed

‎Art/EstherKal-ExpandingBubble/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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>Expanding Bubble Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="bubble"></div>
11+
</body>
12+
</html>

‎Art/EstherKal-ExpandingBubble/meta.json

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

‎Art/EstherKal-ExpandingBubble/styles.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
background: linear-gradient(135deg, #ff7eb3, #8b5cf6);
8+
overflow: hidden;
9+
}
10+
11+
.bubble {
12+
width: 100px;
13+
height: 100px;
14+
background: radial-gradient(circle, #ff9a9e, #fad0c4);
15+
border-radius: 50%;
16+
animation: bubbleMove 3s infinite alternate, colorChange 6s infinite;
17+
}
18+
19+
@keyframes bubbleMove {
20+
0% {
21+
transform: scale(1);
22+
}
23+
100% {
24+
transform: scale(1.5) translateY(-20px);
25+
}
26+
}
27+
28+
@keyframes colorChange {
29+
0% {
30+
background: radial-gradient(circle, #ff9a9e, #fad0c4);
31+
}
32+
50% {
33+
background: radial-gradient(circle, #a1c4fd, #c2e9fb);
34+
}
35+
100% {
36+
background: radial-gradient(circle, #fbc2eb, #a6c1ee);
37+
}
38+
}

‎Art/EstherKal-HappyBirthdayBalloons/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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>Happy Birthday Balloons</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
11+
<div class="balloon-container">
12+
<div class="balloon" id="balloon1"><span>H</span></div>
13+
<div class="balloon" id="balloon2"><span>A</span></div>
14+
<div class="balloon" id="balloon3"><span>P</span></div>
15+
<div class="balloon" id="balloon4"><span>P</span></div>
16+
<div class="balloon" id="balloon5"><span>Y</span></div>
17+
18+
<div class="space"></div>
19+
20+
<div class="balloon" id="balloon6"><span>B</span></div>
21+
<div class="balloon" id="balloon7"><span>I</span></div>
22+
<div class="balloon" id="balloon8"><span>R</span></div>
23+
<div class="balloon" id="balloon9"><span>T</span></div>
24+
<div class="balloon" id="balloon10"><span>H</span></div>
25+
<div class="balloon" id="balloon11"><span>D</span></div>
26+
<div class="balloon" id="balloon12"><span>A</span></div>
27+
<div class="balloon" id="balloon13"><span>Y</span></div>
28+
</div>
29+
30+
</body>
31+
</html>

‎Art/EstherKal-HappyBirthdayBalloons/meta.json

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

‎Art/EstherKal-HappyBirthdayBalloons/styles.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
body {
2+
background-color: #f0f8ff;
3+
font-family: Arial, sans-serif;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
}
11+
12+
.balloon-container {
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
position: relative;
17+
height: 100%;
18+
}
19+
20+
.balloon {
21+
background-color: #ff6f61;
22+
width: 60px;
23+
height: 80px;
24+
border-radius: 50%;
25+
margin: 0 10px;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
font-size: 24px;
30+
color: white;
31+
font-weight: bold;
32+
position: relative;
33+
animation: happy-birthday-balloons 2s ease-in-out infinite;
34+
}
35+
36+
.space {
37+
width: 40px;
38+
}
39+
40+
.balloon:before {
41+
content: "";
42+
position: absolute;
43+
width: 2px;
44+
height: 150px;
45+
background-color: #333;
46+
top: 100%;
47+
left: 50%;
48+
transform: translateX(-50%);
49+
}
50+
51+
@keyframes happy-birthday-balloons {
52+
0%, 100% {
53+
transform: translateY(0);
54+
}
55+
50% {
56+
transform: translateY(-40px);
57+
}
58+
}
59+
60+
#balloon1, #balloon3, #balloon5, #balloon7, #balloon9, #balloon11, #balloon13 {
61+
animation: floatUp 2s ease-in-out infinite;
62+
}
63+
64+
#balloon2, #balloon4, #balloon6, #balloon8, #balloon10, #balloon12 {
65+
animation: floatDown 2s ease-in-out infinite;
66+
}
67+
68+
@keyframes floatUp {
69+
0%, 100% {
70+
transform: translateY(0);
71+
}
72+
50% {
73+
transform: translateY(-40px);
74+
}
75+
}
76+
77+
@keyframes floatDown {
78+
0%, 100% {
79+
transform: translateY(0);
80+
}
81+
50% {
82+
transform: translateY(40px);
83+
}
84+
}

0 commit comments

Comments
 (0)