changed my stars animation to be infinite (#2390)

* my falling ball animation * corrected path on include.js * added stars animation * replaced wrong file with the right gif file * improved css file * changed to infinite * flying baloon animation * chaned to infinite --------- Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
zero-to-mastery · Oct 30, 2023 · 43c5601 · 43c5601
1 parent dc74b05
commit 43c5601
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 1 deletion.
diff --git a/Art/Ornitcg/baloon/baloon.gif b/Art/Ornitcg/baloon/baloon.gif
diff --git a/Art/Ornitcg/baloon/index.html b/Art/Ornitcg/baloon/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- <meta http-equiv="refresh" content="3"> -->
+    <title>Baloon</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="baloon-container">
+        <div class="baloon"></div>
+        <div class="baloon-tie"></div>
+        <div class="baloon-strand1"></div>
+        <!-- <div class="baloon-strand2"></div> -->
+
+    </div>
+
+</body>
+</html>
diff --git a/Art/Ornitcg/baloon/style.css b/Art/Ornitcg/baloon/style.css
@@ -0,0 +1,72 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: grid;
+    place-content:  center;
+    background-color: antiquewhite;
+
+}
+
+.baloon {
+    display: block;
+    height: 5rem;
+    width: 5rem;
+    background-color: blueviolet;
+    border-radius:  50% 58% 43% 58%;
+}
+
+.baloon-tie {
+    display: block;
+    height: 0.5rem;
+    width: 20px;
+    margin-top: -2px;;
+    margin-left: 40px;
+
+    background-color: blueviolet;
+    clip-path: polygon(40% 0%, 50% 0%, 0% 100%, 100% 100%);
+}
+.baloon-strand1 {
+    display: block;
+    width:5rem; 
+    height:5rem;  
+    border:solid 5px #000;
+    border-color:#000 transparent transparent transparent;
+    border-radius: 100px 100%/50px 100px 0 0;
+    margin-left: -30px;
+    margin-top: -15px;
+    transform: rotate(90deg)
+}
+
+
+.baloon-container {
+    position: relative;
+    padding: 0;
+    height: 200px;
+    width: 100px;
+    background-color: inherit;
+    display: grid;
+    place-content: center ;
+    animation: swing 4000ms infinite;
+}
+
+@keyframes swing {
+    0% {
+        transform: translateY(300%) rotate(30deg) ;
+        animation-timing-function: linear;
+    }
+
+
+    50% {
+        transform: translateY(100%) rotate(-30deg) ;
+                animation-timing-function: linear;
+
+
+    }
+    100% {
+        transform: translateY(-200%) rotate(30deg) ;
+                animation-timing-function: linear;
+
+
+    }
+
+}
diff --git a/Art/Ornitcg/stars/style.css b/Art/Ornitcg/stars/style.css
@@ -23,7 +23,7 @@ body {
     background-color: white;
     clip-path: polygon(44% 6%, 61% 35%, 91% 29%, 69% 54%, 78% 86%, 50% 70%, 23% 85%, 32% 57%, 6% 41%, 39% 35%);
     transform: scale(200%) rotate(50deg);      
-    animation: sparkle 3000ms 5;
+    animation: sparkle 3000ms infinitegit push;
 }
 
 @keyframes sparkle {

diff --git a/include.js b/include.js
@@ -470,6 +470,13 @@ let cards = [
     author: 'Ornitcg',
     githubLink: 'https://github.com/ornitcg'
   },
+  {
+    artName: 'Flying-Baloon',
+    pageLink: './Art/Ornitcg/baloon/index.html',
+    imageLink: './Art/Ornitcg/baloon/baloon.gif',
+    author: 'Ornitcg',
+    githubLink: 'https://github.com/ornitcg'
+  },
   {
     artName: 'Circles',
     pageLink: './Art/AmanRawat/index.html',