Added Name typing animation

Name Typing animation CSS
sachinsaini4278 · Sep 8, 2022 · b1544d1 · b1544d1
1 parent 2922967
commit b1544d1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/Loading Animation/index.html b/Loading Animation/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">        
+        <div class="typing">This is Sachin Saini</div>        
+    </div>
+</body>
+</html>
diff --git a/Loading Animation/style.css b/Loading Animation/style.css
@@ -0,0 +1,26 @@
+body{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: black;    
+    min-height: 100vh;
+  }
+
+  .typing{
+    color: rgb(37, 60, 178);
+    overflow: hidden;
+    border-right: .15em solid orange;
+    white-space: nowrap;
+    font-size: 2.6rem;
+    width: 0;
+    animation: typing 2s steps(13, end) infinite forwards;
+  }
+  @keyframes typing {
+    0%{      
+      width: 0;
+    }
+    60%{
+      width: 100%;
+    }     
+  }
+