adding animation (#2447)

zero-to-mastery · Jun 30, 2024 · cba2a20 · cba2a20
1 parent 44e0275
commit cba2a20
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 0 deletions.
diff --git a/Art/arr199/index.html b/Art/arr199/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Text Animation</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div>
+      <h1><span></span></h1>
+    </div>
+  </body>
+</html>
diff --git a/Art/arr199/preview.gif b/Art/arr199/preview.gif
diff --git a/Art/arr199/styles.css b/Art/arr199/styles.css
@@ -0,0 +1,105 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  background-color: black;
+  height: 100vh;
+  width: 100%;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+}
+
+div {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  width: 700px;
+
+
+}
+
+h1 {
+  color:  rgb(163, 155, 160);
+  margin-bottom: 200px;
+
+}
+
+/* CURSOR  ANIMATION*/
+h1 span::after{
+  content: " ";
+  animation: cursor;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  padding-right: .1em;
+  color: white;
+
+}
+
+@keyframes cursor {
+
+ to { border-right: 2px solid rgb(216, 211, 211) ;opacity: .3; }
+}
+
+/* TYPING ANIMATION */
+
+h1 span::before{
+  content: "";
+  animation-name: type;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-delay: 1s;
+  text-shadow: 2px 2px 30px;
+  font-size: 40px;
+  letter-spacing: 8px;
+}
+
+@keyframes type {
+  1% {content: "C";} 
+  3% {content: "CS";} 
+  5% {content: "CSS";} 
+  6% {content: "CSS ";} 
+  7% {content: "CSS I";} 
+  8% {content: "CSS IS "}
+  9% {content: "CSS IS A"}  
+  10% {content: "CSS IS AW" ; color: rgb(67, 197, 153);   }   
+  11% {content: "CSS IS AWE"}  
+  12% {content: "CSS IS AWES"}  
+  13% {content: "CSS IS AWESO"}  
+  14% {content: "CSS IS AWESOM"}  
+  15% {content: "CSS IS AWESOME"}
+  34% {content: "CSS IS AWESOME"}
+  35% {content: "CSS IS AWES";} 
+  36% {content: "CSS IS AW";} 
+  37% {content: "CSS IS ";} 
+  38% {content: "CSS IS G";} 
+  39% {content: "CSS IS GR";} 
+  40% {content: "CSS IS GRE"} 
+  42% {content: "CSS IS GREA"} 
+  43% {content: "CSS IS GREAT"} 
+  61% {content: "CSS IS GREAT" ; color: rgb(244, 251, 108);} 
+  62% {content: "CSS IS GRE"} 
+  63% {content: "CSS IS GR"} 
+  64% {content: "CSS IS "} 
+  65% {content: "CSS IS T"} 
+  66% {content: "CSS IS TH"} 
+  67% {content: "CSS IS THE"} 
+  68% {content: "CSS IS THE "} 
+  69% {content: "CSS IS THE B"} 
+  70% {content: "CSS IS THE BE"} 
+  71% {content: "CSS IS THE BES"} 
+  72% {content: "CSS IS THE BEST"} 
+  91% {content: "CSS IS THE BEST" ; color: rgb(85, 203, 56);} 
+  92% {content: "CSS IS THE BE"} 
+  93% {content: "CSS IS THE "} 
+  94% {content: "CSS IS TH"} 
+  95% {content: "CSS IS T"} 
+  96% {content: "CSS IS"} 
+  97% {content: "CSS I"} 
+  98% {content: "CSS"} 
+  98% {content: "C"} 
+  100% {content: "" ; color: rgb(85, 203, 56);} 
+
+}
diff --git a/include.js b/include.js
@@ -2935,6 +2935,13 @@ let cards = [
     imageLink: './Art/Imaginario27/crazy-spinning-circles.gif',
     author: 'Imaginario27',
     githubLink: 'https://github.com/Imaginario27'
+  },
+  { 
+    artName: 'Typing Animation',
+    pageLink: './Art/arr199/index.html',
+    imageLink: './Art/arr199/preview.gif',
+    author: 'Abiel',
+    githubLink: 'https://github.com/arr199'
   }
 ];