Skip to content

Commit 336c256

Browse files
Aviral02gitLaurelineP
Aviral02git
and
LaurelineP
authored
add floating-bubbles (#3232)
Co-authored-by: Laureline Paris <laurelinedev@gmail.com>
1 parent 1393238 commit 336c256

3 files changed

Lines changed: 123 additions & 0 deletions

File tree

‎Art/Aviral02git-Floating-Bubbles/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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>Floating Bubbles</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="bubble bubble1"></div>
12+
<div class="bubble bubble2"></div>
13+
<div class="bubble bubble3"></div>
14+
<div class="bubble bubble4"></div>
15+
<div class="bubble bubble5"></div>
16+
<div class="bubble bubble6"></div>
17+
</div>
18+
</body>
19+
</html>

‎Art/Aviral02git-Floating-Bubbles/meta.json‎

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

‎Art/Aviral02git-Floating-Bubbles/styles.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
9+
height: 100vh;
10+
overflow: hidden;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
16+
.container {
17+
width: 100%;
18+
height: 100%;
19+
position: relative;
20+
}
21+
22+
.bubble {
23+
position: absolute;
24+
border-radius: 50%;
25+
background: rgba(255, 255, 255, 0.2);
26+
backdrop-filter: blur(10px);
27+
border: 2px solid rgba(255, 255, 255, 0.3);
28+
animation: float 4s ease-in-out infinite;
29+
}
30+
31+
.bubble1 {
32+
width: 80px;
33+
height: 80px;
34+
left: 10%;
35+
bottom: -100px;
36+
animation-delay: 0s;
37+
animation-duration: 6s;
38+
}
39+
40+
.bubble2 {
41+
width: 60px;
42+
height: 60px;
43+
left: 25%;
44+
bottom: -100px;
45+
animation-delay: 1s;
46+
animation-duration: 5s;
47+
}
48+
49+
.bubble3 {
50+
width: 100px;
51+
height: 100px;
52+
left: 45%;
53+
bottom: -100px;
54+
animation-delay: 2s;
55+
animation-duration: 7s;
56+
}
57+
58+
.bubble4 {
59+
width: 70px;
60+
height: 70px;
61+
left: 65%;
62+
bottom: -100px;
63+
animation-delay: 0.5s;
64+
animation-duration: 5.5s;
65+
}
66+
67+
.bubble5 {
68+
width: 90px;
69+
height: 90px;
70+
left: 80%;
71+
bottom: -100px;
72+
animation-delay: 1.5s;
73+
animation-duration: 6.5s;
74+
}
75+
76+
.bubble6 {
77+
width: 50px;
78+
height: 50px;
79+
left: 35%;
80+
bottom: -100px;
81+
animation-delay: 3s;
82+
animation-duration: 5s;
83+
}
84+
85+
@keyframes float {
86+
0% {
87+
transform: translateY(0) translateX(0);
88+
opacity: 0;
89+
}
90+
10% {
91+
opacity: 1;
92+
}
93+
90% {
94+
opacity: 1;
95+
}
96+
100% {
97+
transform: translateY(-100vh) translateX(50px);
98+
opacity: 0;
99+
}
100+
}

0 commit comments

Comments
 (0)