Tennis Ball with Bouncing and Rotating Animation (#2367)

* Added Bouncing and Rotating Tennis Ball animation * Changed the index.js
zero-to-mastery · Oct 27, 2023 · 5ff3661 · 5ff3661
1 parent c833761
commit 5ff3661
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 0 deletions.
diff --git a/Art/runtimeerror11_2/index.html b/Art/runtimeerror11_2/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+    <title>Tennis_Ball</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="center">
+        <div class="ball"></div>
+        <div class="shadow"></div>
+    </div>
+</body>
+</html>
diff --git a/Art/runtimeerror11_2/style.css b/Art/runtimeerror11_2/style.css
@@ -0,0 +1,137 @@
+body{
+    margin: 0;
+    padding: 0;
+    background:#0058a5;
+
+}
+.center
+{
+    position: absolute;
+    top: 50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+}
+.ball{
+    /* left:-60px; */
+    width: 150px;
+    height: 150px;
+    background-color: #c9f364;
+    border-radius:50%;
+    transform:translate(-50%,-50%);
+    overflow:hidden;
+    position: absolute;
+    animation: bounce 5s  infinite;
+}
+
+.ball:before{
+    content: '';
+    position:absolute;
+    width:100%;
+    height:100%;
+    border-radius:50%;
+    box-sizing: border-box;
+    background:transparent;
+    border: 5px solid #fff;
+    left: -65%;
+    filter:blur(1px);
+
+}
+.ball:after{
+    content: '';
+    position:absolute;
+    width:100%;
+    height:100%;
+    border-radius:50%;
+    box-sizing: border-box;
+    background:transparent;
+    border: 5px solid #fff;
+    right: -65%;
+    filter:blur(1px);
+
+}
+
+@keyframes bounce
+ {
+    0%
+    {
+        transform :   translate(-50%,-50%) translateY(-300px) rotate(0deg);
+    }
+    14%
+    {
+        transform :   translate(-50%,-50%) translateY(250px) rotate(45deg);
+    }
+    30%
+    {
+        transform :   translate(-50%,-50%) translateY(-210px) rotate(90deg);
+    }
+    43%
+    {
+        transform :   translate(-50%,-50%) translateY(250px) rotate(150deg);
+    }
+
+    55%{
+        transform :  translate(-50%,-50%) translateY(-60px) rotate(180deg);
+    }
+    65%
+    {
+        transform :   translate(-50%,-50%) translateY(250px) rotate(210deg);
+    }
+    73%
+    {
+        transform :   translate(-50%,-50%) translateY(90px) rotate(240deg);
+    }
+    76%
+    {
+        transform :   translate(-50%,-50%) translateY(250px) rotate(260deg);
+    }
+    78%
+    {
+        transform :   translate(-50%,-50%) translateY(200px) rotate(275deg);
+    }
+    80%
+    {
+        transform :   translate(-50%,-50%) translateY(250px) rotate(290deg);
+    }
+    86%
+    {
+        transform :   translate(0%,-50%) translateY(250px) rotate(340deg);
+    }
+    88%
+    {
+        transform :   translate(40%,-50%) translateY(250px) rotate(10deg);
+    }90%
+    {
+        transform :   translate(75%,-50%) translateY(250px) rotate(30deg);
+    }92%
+    {
+        transform :   translate(120%,-50%) translateY(250px) rotate(40deg);
+    }94%
+    {
+        transform :   translate(135%,-50%) translateY(250px) rotate(50deg);
+    }
+    95%
+    {
+        transform :   translate(160%,-50%) translateY(250px) rotate(60deg);
+    }
+    96%
+    {
+        transform :   translate(180%,-50%) translateY(250px) rotate(75deg);
+    }
+    97%
+    {
+        transform :   translate(200%,-50%) translateY(250px) rotate(90deg);
+    }
+    98%
+    {
+        transform :   translate(210%,-50%) translateY(250px) rotate(100deg);
+    }
+    100%{
+        transform :  translate(210%,-50%) translateY(250px) rotate(105deg);
+    }
+}
+
+
+
+
+
+
diff --git a/Art/runtimeerror11_2/tennis_ball.gif b/Art/runtimeerror11_2/tennis_ball.gif
diff --git a/include.js b/include.js
@@ -1661,6 +1661,13 @@ const cards = [
     author: 'Roksolana',
     githubLink: 'https://github.com/RoksolanaVeres'
   },
+  {
+    artName: 'Bouncing Tennis Ball',
+    pageLink: './Art/runtimeerror11_2/index.html',
+    imageLink: '.Art/runtimeerror11_2/tennis_ball.gif',
+    author: 'Suparshwa Patil',
+    githubLink: 'https://github.com/runtimeerror11'
+  },
   {
     artName: 'Wavy boucing ball',
     pageLink: './Art/Swadeshit27/index.html',