Added a ring animation (#2397)

* Create ring.html "HTML File For Ring Animation" * Create styles.css "CSS File For Ring Animation" * Add Gif file * Update include.js
zero-to-mastery · Oct 31, 2023 · 1751f7c · 1751f7c
1 parent 449ef54
commit 1751f7c
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 0 deletions.
diff --git a/Art/stormworm9/RingAnimation/ring.gif b/Art/stormworm9/RingAnimation/ring.gif
diff --git a/Art/stormworm9/RingAnimation/ring.html b/Art/stormworm9/RingAnimation/ring.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+     <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+  <div class="ring-logo">
+    <div class="ring blue"></div>
+    <div class="ring yellow"></div>
+    <div class="ring black"></div>
+    <div class="ring green"></div>
+    <div class="ring red"></div>
+  </div>
+</body>
+</html>
diff --git a/Art/stormworm9/RingAnimation/styles.css b/Art/stormworm9/RingAnimation/styles.css
@@ -0,0 +1,66 @@
+body {
+  background-color: rgba(88, 4, 16, 0.858);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.ring-logo 
+{
+  display: flex;
+}
+.ring {
+  width: 100px;
+  height: 100px;
+  background-color: transparent;
+  border: 15px dashed; 
+  border-radius: 50%;
+  position: relative;
+  animation: fallAndRotate 4s alternate-reverse infinite;
+  margin: 0 -20px;
+  transform-origin: center bottom;
+}
+
+.blue {
+  border-color: blue;
+  animation-delay: 0s;
+  transform: translateX(-100px) translateY(-100px); 
+}
+
+.yellow {
+  border-color: yellow;
+  animation-delay: 0s;
+  transform: translateX(100px) translateY(-100px); 
+}
+
+.black {
+  border-color: black;
+  animation-delay: 0s;
+  transform: translateY(-100px); 
+}
+
+.green {
+  border-color: green;
+  animation-delay: 0s;
+  transform: translateY(100px);
+}
+
+.red {
+  border-color: red;
+  animation-delay: 0s;
+}
+
+@keyframes fallAndRotate {
+  0% {
+    transform: translateY(0) rotate(10deg); 
+  }
+  100% {
+    transform: translateY(250px) rotate(360deg);
+  }
+}
diff --git a/include.js b/include.js
@@ -1,4 +1,11 @@
 let cards = [
+   {
+    artName: 'RingAnimation',
+    pageLink: './Art/stormworm9/RingAnimation/ring.html',
+    imageLink: './Art/stormworm9/RingAnimation/ring.gif',
+    author: 'stormworm9',
+    githubLink: 'https://github.com/stormworm9'
+  },
   {
     artName: 'Elevator Ride',
     pageLink: './Art/deverestHood/index.html',