Animation2 (#98)

* created animated background effect * loading animation effect
pulkit-30 · Oct 17, 2022 · d28b30c · d28b30c
1 parent 7a60789
commit d28b30c
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 0 deletions.
diff --git a/Loading Animation Effect/index.html b/Loading Animation Effect/index.html
@@ -0,0 +1,36 @@
+<!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>Loading Animation Effect</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <section>
+        <div class="loader">
+           <span style="--i:1;"></span> 
+           <span style="--i:2;"></span> 
+           <span style="--i:3;"></span> 
+           <span style="--i:4;"></span> 
+           <span style="--i:5;"></span> 
+           <span style="--i:6;"></span> 
+           <span style="--i:7;"></span> 
+           <span style="--i:8;"></span> 
+           <span style="--i:9;"></span> 
+           <span style="--i:10;"></span> 
+           <span style="--i:11;"></span> 
+           <span style="--i:12;"></span> 
+           <span style="--i:13;"></span> 
+           <span style="--i:14;"></span> 
+           <span style="--i:15;"></span> 
+           <span style="--i:16;"></span> 
+           <span style="--i:17;"></span> 
+           <span style="--i:18;"></span> 
+           <span style="--i:19;"></span> 
+           <span style="--i:20;"></span> 
+        </div>
+    </section>
+</body>
+</html>
diff --git a/Loading Animation Effect/style.css b/Loading Animation Effect/style.css
@@ -0,0 +1,61 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+section{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background:#042104;
+    animation: animateBg 10s linear infinite;
+}
+@keyframes animateBg {
+    0%{
+        filter: hue-rotate(0deg);
+    }
+    100%{
+        filter: hue-rotate(360deg);
+
+    }
+}
+section .loader{
+    position:relative;
+    width: 120px;
+    height: 120px;
+}
+section .loader span{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: rotate(calc(18deg * var(--i)));
+}
+section .loader span::before{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: #00ff0a;
+    box-shadow: 0 0 10px #00ff0a,
+                0 0 20px #00ff0a,
+                0 0 40px #00ff0a,
+                0 0 60px #00ff0a,
+                0 0 80px #00ff0a,
+                0 0 100px #00ff0a;
+    animation: animate 2s linear infinite; 
+    animation-delay: calc(0.1s * var(--i));           
+}
+@keyframes animate {
+    0%{
+        transform: scale(1);
+    }
+    80%,100%{
+        transform: scale(0);
+    }
+}