diff --git a/Art/Parth-co79-the-ball/index.html b/Art/Parth-co79-the-ball/index.html new file mode 100644 index 000000000..0ca9b5060 --- /dev/null +++ b/Art/Parth-co79-the-ball/index.html @@ -0,0 +1,14 @@ + + + + + + Simple Looping Animation + + + + +
+
+ + \ No newline at end of file diff --git a/Art/Parth-co79-the-ball/meta.json b/Art/Parth-co79-the-ball/meta.json new file mode 100644 index 000000000..60a1e8824 --- /dev/null +++ b/Art/Parth-co79-the-ball/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "bouncing ball", + "githubHandle": "Parth-co79" +} \ No newline at end of file diff --git a/Art/Parth-co79-the-ball/styles.css b/Art/Parth-co79-the-ball/styles.css new file mode 100644 index 000000000..bbd11f037 --- /dev/null +++ b/Art/Parth-co79-the-ball/styles.css @@ -0,0 +1,48 @@ +/* Basic page setup */ +body { + margin: 0; + height: 100vh; + background-color: #f0f4f8; + display: flex; + align-items: flex-end; + justify-content: center; + overflow: hidden; +} + +/* Ground for reference */ +.ground { + position: absolute; + bottom: 0; + width: 100%; + height: 40px; + background: #bbb; +} + +/* The ball */ +.ball { + width: 60px; + height: 60px; + background-color: #ff6b6b; + border-radius: 50%; + position: relative; + animation: bounce 2s ease-in-out infinite; +} + +/* Keyframes for the looping animation */ +@keyframes bounce { + 0% { + transform: translateY(0) translateX(-200px); + } + 25% { + transform: translateY(-200px) translateX(-100px); + } + 50% { + transform: translateY(0) translateX(0); + } + 75% { + transform: translateY(-200px) translateX(100px); + } + 100% { + transform: translateY(0) translateX(200px); + } +} \ No newline at end of file