Rotating Text Animation using HTML and CSS

HuXn-WebDev · HuXn-WebDev · commit 861ef5857bad · 2022-08-14T05:39:06.000-07:00
diff --git a/58. Rotating Text/index.html b/58. Rotating Text/index.html
@@ -0,0 +1,24 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Rotating Text</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="outer-headings">
+      <h1>
+        I am,
+        <div class="inner-headings">
+          <span>
+            UI/UX Designer <br />
+            Front-End Developer <br />
+            Back-End Developer <br />
+            Full-Stack Developer <br />
+          </span>
+        </div>
+      </h1>
+    </div>
+  </body>
+</html>
diff --git a/58. Rotating Text/style.css b/58. Rotating Text/style.css
@@ -0,0 +1,60 @@
+* {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.outer-headings {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+h1 {
+  font-size: 45px;
+}
+
+.inner-headings {
+  border: 0px solid #ddd;
+  height: 50px;
+  line-height: 50px;
+  font-size: 45px;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+
+.inner-headings span {
+  position: relative;
+  color: crimson;
+  animation: animation 10s ease infinite;
+}
+
+@keyframes animation {
+  0%,
+  100% {
+    top: 0;
+  }
+  20% {
+    top: 0;
+  }
+  25% {
+    top: -50px;
+  }
+  45% {
+    top: -50px;
+  }
+  50% {
+    top: -100px;
+  }
+  70% {
+    top: -100px;
+  }
+  75% {
+    top: -150px;
+  }
+  95% {
+    top: -150px;
+  }
+}
