Glowing-Dot-Animation

pulkit-30 · Oct 5, 2021 · c60cf43 · c60cf43
1 parent dd7d3c5
commit c60cf43
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 1 deletion.
diff --git a/Glowing Dot Animation/image.jpg b/Glowing Dot Animation/image.jpg
diff --git a/Glowing Dot Animation/index.html b/Glowing Dot Animation/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Glowing Dot Animation</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <ul>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+    <footer>
+      <div>
+        <div>
+          Credit:-
+          <a href="https://github.com/Lavish-Bansal" class="atag" target="/"
+            >Lavish Bansal</a
+          >
+        </div>
+      </div>
+      <div class="date">Date:- 04-10-2021</div>
+    </footer>
+  </body>
+</html>
diff --git a/Glowing Dot Animation/readme.md b/Glowing Dot Animation/readme.md
@@ -0,0 +1,2 @@
+# Glowing Dot Animation
+<img src="./image.jpg"/>
diff --git a/Glowing Dot Animation/style.css b/Glowing Dot Animation/style.css
@@ -0,0 +1,75 @@
+body {
+  margin: 0;
+  padding: 0;
+  background: #262626;
+}
+ul {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+ul li {
+  list-style: none;
+  width: 40px;
+  height: 40px;
+  background: #fff;
+  border-radius: 50%;
+  animation: animate 1.6s ease-in-out infinite;
+}
+@keyframes animate {
+  0%,
+  40%,
+  100% {
+    transform: scale(0.2);
+  }
+  20% {
+    transform: scale(1);
+  }
+}
+ul li:nth-child(1) {
+  animation-delay: -1.4s;
+  background: #ffff00;
+  box-shadow: 0 0 50px #ffff00;
+}
+ul li:nth-child(2) {
+  animation-delay: -1.2s;
+  background: #76ff03;
+  box-shadow: 0 0 50px #76ff03;
+}
+ul li:nth-child(3) {
+  animation-delay: -1s;
+  background: #f06292;
+  box-shadow: 0 0 50px #f06292;
+}
+ul li:nth-child(4) {
+  animation-delay: -0.8s;
+  background: #4fc3f7;
+  box-shadow: 0 0 50px #4fc3f7;
+}
+ul li:nth-child(5) {
+  animation-delay: -0.6s;
+  background: #ba68c8;
+  box-shadow: 0 0 50px #ba68c8;
+}
+ul li:nth-child(6) {
+  animation-delay: -0.4s;
+  background: #f57c00;
+  box-shadow: 0 0 50px #f57c00;
+}
+ul li:nth-child(7) {
+  animation-delay: -0.2s;
+  background: #673ab7;
+  box-shadow: 0 0 50px #673ab7;
+}
+footer {
+  position: relative;
+  color: yellow;
+  top: 38.5rem;
+}
+footer a {
+  color: #fff;
+}
diff --git a/README.md b/README.md
@@ -48,7 +48,8 @@
 | Loading Balls Animation       | https://pulkit203.github.io/LoadingBalls/                               |
 | Automatic Image Slider Animation|https://palaksharma23.github.io/Automatic-Image-Changing-Animation/    |
 | Confetti Animation            | https://anjali1102.github.io/confetti_animation/                        |                   
-| Comets Animation            | https://jonathanallisson.github.io/Comets/                        |                   
+| Comets Animation            | https://jonathanallisson.github.io/Comets/                        |        
+| Glowing Dot Animation         | https://lavishbansal17.github.io/Glowing-Dot-Animation/                 |          
 ---
 
 ![Project Intro Gif](./Gif.gif)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Glowing Dot Animation
		<img src="./image.jpg"/>