An animation of Fast Typing

cryptic-padawan · web-flow · commit 74598b66a133 · 2021-10-30T13:26:47.000+05:30
diff --git a/Fast typing/Typing.css b/Fast typing/Typing.css
@@ -0,0 +1,57 @@
+body
+{
+      background:radial-gradient(#00faff ,#f981f3 60%);
+}
+h2 {
+    animation: type 1.5s steps(17);
+    overflow: hidden;
+    white-space: nowrap;
+    font-family: monospace;
+    border-right: 16px solid black;
+    width: 19ch;
+    color:red;
+}
+
+
+@keyframes type {
+    0% {
+        width: 0ch;
+    }
+    100% {
+        width: 19ch;
+    }
+}
+Can {
+    text-align:center;
+}
+#startButtonId {
+position:absolute;
+left:34%;
+top:195px;
+border-radius: 30%;
+  border-bottom: 14px   ;
+  border-top: 14px   ;
+  width: 100px;
+  height: 100px;
+ -webkit-animation: spin 1.5s linear
+  infinite;
+  animation: spin 1.8s linear infinite; 
+background-color: black;
+
+}
+#buttonText {
+color: white;
+text-align: center;
+font-size: x-large ;
+padding: 30x;
+}
+@-webkit-keyframes spin {
+0% {-webkit-transform: rotate(0deg);}
+  100% { -webkit-transform:
+  rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
diff --git a/Fast typing/Typing.html b/Fast typing/Typing.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Page Title</title>
+        <link rel="stylesheet" href="Typing.css">
+    </head>
+    <body>
+       <h2>Welcome in my code.</h2>
+       <br /><br /><br />
+       
+       <marquee>You can follow me on<br/>👇👇👇👇👇👇👇👇</marquee>
+       
+       <div class="Can">
+      <div id="startButtonId">
+      <div id="buttonText">
+       <a href=https://www.sololearn.com/Profile/8855482/?ref=app><img alt="SoloLearn" src="https://www.sololearn.com/Uploads/icons/sololearn.png" width=100px height=100px /></a>
+      </div> </div>
+       </div>
+       <br /><br /><br /><br /><br /><br /><br /><br />
+       <a  href="https://www.youtube.com/channel/UCf_Rde_c0kf093lkPsk1P1w">My youtube channel</a>
+    </body>
+</html>
