Skip to content

Commit 30507ac

Browse files
l-whitel-white
authored
Merge pull request #3363 from Divinedew/bouncingball
adding my animation
2 parents 171d085 + edd7669 commit 30507ac

3 files changed

Lines changed: 117 additions & 0 deletions

File tree

‎Art/Divinedew-Bouncingball/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
<link rel="stylesheet" href="styles.css">
7+
<title>bouncing-ball-animation</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="container2">
12+
<div class="ballImg">
13+
<img src="ball.png" alt="ball" class="bounce-ball">
14+
</div>
15+
<div class="ball">
16+
</div>
17+
</div>
18+
<div class="container3">
19+
<p>Loading...</p>
20+
</div>
21+
</div>
22+
23+
</body>
24+
</html>

‎Art/Divinedew-Bouncingball/meta.json‎

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

‎Art/Divinedew-Bouncingball/styles.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
body{
2+
background-color: #000000;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
padding: 0;
8+
overflow: hidden;
9+
}
10+
11+
12+
.container {
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: flex-end;
16+
align-items: center;
17+
height: 100%;
18+
}
19+
20+
.container2 {
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: flex-end;
24+
align-items: center;
25+
}
26+
img{
27+
width: 70px;
28+
height: 50px;
29+
margin-right: 25px;
30+
}
31+
32+
.ball {
33+
width: 15px;
34+
height: 7px;
35+
background-color: rgba(138, 43, 226, 0.9);
36+
/*background-color: rgba(109, 80, 69, 0.2);*/
37+
border-radius: 50%;
38+
padding: 0px 10px;
39+
margin-right: 22px;
40+
}
41+
42+
.container3 {
43+
display: flex;
44+
flex-direction: column;
45+
align-items: center;
46+
margin-bottom: 120px;
47+
}
48+
49+
p {
50+
font-family: Arial, sans-serif;
51+
font-size: 18px;
52+
color: #fffcfc;
53+
letter-spacing: 5px;
54+
}
55+
56+
57+
@keyframes bounce {
58+
0% {
59+
transform: translateY(0);
60+
}
61+
50% {
62+
transform: translateY(-90px);
63+
}
64+
100% {
65+
transform: translateY(15px);
66+
}
67+
}
68+
69+
.bounce-ball {
70+
animation: bounce 1s ease-in-out infinite;
71+
}
72+
73+
74+
@keyframes expandshadow {
75+
0% {
76+
transform: scale(0.5);
77+
}
78+
50% {
79+
transform: scale(1.5);
80+
}
81+
100% {
82+
transform: scale(1);
83+
}
84+
}
85+
86+
.ball {
87+
box-shadow: 0 0 25px rgba(138, 43, 226, 0.9);
88+
animation: expandshadow 1s ease-in-out infinite;
89+
}

0 commit comments

Comments
 (0)