From 909cfeeb2cbdfbbf8d77c2201c5f8257ba0627e3 Mon Sep 17 00:00:00 2001
From: Rahul Aggarwal <91338578+Rahulagg13@users.noreply.github.com>
Date: Wed, 19 Oct 2022 17:41:02 +0530
Subject: [PATCH] Smoke Effect (#101)
---
smoke effect/index.html | 25 +++++++++++++++++++
smoke effect/style.css | 55 +++++++++++++++++++++++++++++++++++++++++
2 files changed, 80 insertions(+)
create mode 100644 smoke effect/index.html
create mode 100644 smoke effect/style.css
diff --git a/smoke effect/index.html b/smoke effect/index.html
new file mode 100644
index 0000000..2739d82
--- /dev/null
+++ b/smoke effect/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+ Smoke Effect
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/smoke effect/style.css b/smoke effect/style.css
new file mode 100644
index 0000000..43b9bce
--- /dev/null
+++ b/smoke effect/style.css
@@ -0,0 +1,55 @@
+*{
+ margin:0;
+ padding:0;
+ font-family: verdana;
+ background: #262626;
+}
+.center{
+ position: absolute;
+ top:50%;
+ left:50%;
+ transform: translate(-50%,-50%);
+}
+
+ul{
+ margin: 0;
+ padding:0;
+ display: flex;
+}
+ul li{
+ list-style: none;
+ color : #fff;
+ font-size: 6em;
+ font-weight: bold;
+ letter-spacing: 10px;
+ filter: blur(1px);
+}
+ul:hover li{
+ animation: animate 2s linear forwards;
+}
+
+@keyframes animate{
+ 0%{
+ transform : rotate(0deg) translateY(0px);
+ }
+ 100%{
+ transform : rotate(45deg) translateY(-200px);
+ opacity: 0;
+ filter: blur(1px);
+ }
+}
+ul li:nth-child(1){
+ animation-delay:0s;
+}
+ul li:nth-child(2){
+ animation-delay:0.4s;
+}
+ul li:nth-child(3){
+ animation-delay:0.8s;
+}
+ul li:nth-child(4){
+ animation-delay:1.2s;
+}
+ul li:nth-child(5){
+ animation-delay:1.6s;
+}
\ No newline at end of file