Update style.css
Browse files
style.css
CHANGED
@@ -7,17 +7,13 @@
|
|
7 |
body {
|
8 |
background-color: #121212;
|
9 |
font-family: 'Arial', sans-serif;
|
10 |
-
|
11 |
-
justify-content: center;
|
12 |
-
align-items: center;
|
13 |
-
height: 100vh;
|
14 |
}
|
15 |
|
16 |
.game-container {
|
17 |
position: relative;
|
18 |
width: 100vw;
|
19 |
height: 100vh;
|
20 |
-
overflow: hidden;
|
21 |
}
|
22 |
|
23 |
.player {
|
@@ -29,6 +25,7 @@ body {
|
|
29 |
background-color: #00ff00;
|
30 |
border-radius: 50%;
|
31 |
transform: translateX(-50%);
|
|
|
32 |
}
|
33 |
|
34 |
.falling-ball {
|
@@ -49,4 +46,22 @@ body {
|
|
49 |
100% {
|
50 |
top: 100vh;
|
51 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
52 |
}
|
|
|
7 |
body {
|
8 |
background-color: #121212;
|
9 |
font-family: 'Arial', sans-serif;
|
10 |
+
overflow: hidden;
|
|
|
|
|
|
|
11 |
}
|
12 |
|
13 |
.game-container {
|
14 |
position: relative;
|
15 |
width: 100vw;
|
16 |
height: 100vh;
|
|
|
17 |
}
|
18 |
|
19 |
.player {
|
|
|
25 |
background-color: #00ff00;
|
26 |
border-radius: 50%;
|
27 |
transform: translateX(-50%);
|
28 |
+
animation: movePlayer 2s infinite alternate;
|
29 |
}
|
30 |
|
31 |
.falling-ball {
|
|
|
46 |
100% {
|
47 |
top: 100vh;
|
48 |
}
|
49 |
+
}
|
50 |
+
|
51 |
+
@keyframes movePlayer {
|
52 |
+
0% {
|
53 |
+
left: 50%;
|
54 |
+
}
|
55 |
+
25% {
|
56 |
+
left: 30%;
|
57 |
+
}
|
58 |
+
50% {
|
59 |
+
left: 70%;
|
60 |
+
}
|
61 |
+
75% {
|
62 |
+
left: 30%;
|
63 |
+
}
|
64 |
+
100% {
|
65 |
+
left: 50%;
|
66 |
+
}
|
67 |
}
|