From d28b30c9f53155d532ef27825f41f2c4fed55a4b Mon Sep 17 00:00:00 2001
From: Raghvendra Mittal <85191142+codermittal17@users.noreply.github.com>
Date: Mon, 17 Oct 2022 19:03:20 +0530
Subject: [PATCH] Animation2 (#98)
* created animated background effect
* loading animation effect
---
Loading Animation Effect/index.html | 36 +++++++++++++++++
Loading Animation Effect/style.css | 61 +++++++++++++++++++++++++++++
2 files changed, 97 insertions(+)
create mode 100644 Loading Animation Effect/index.html
create mode 100644 Loading Animation Effect/style.css
diff --git a/Loading Animation Effect/index.html b/Loading Animation Effect/index.html
new file mode 100644
index 0000000..3756f9e
--- /dev/null
+++ b/Loading Animation Effect/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ Loading Animation Effect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Loading Animation Effect/style.css b/Loading Animation Effect/style.css
new file mode 100644
index 0000000..ac89dcd
--- /dev/null
+++ 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);
+ }
+}
\ No newline at end of file