Skip to main content

Pure Css Typewriter Effect | Rustcode

by Rustcode
pure-css-typewriter-effect

"Typewriter" effect is a fancy concept to show the writing effect on the text which we are using in our web development project. This effect looks very attractive and smooth.

You can generate this effect using javascript and jquery as well. But here we are using html and css. You can refer to our other articles to learn about the web development effect.


1. HTML

<!DOCTYPE html>
<html>
<head>
 <title>Typewriter Effect</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <p>Pure Css Typewriter Effect.</p>

</body>
</html>


2. CSS

body {
  background: #000;
  color: lime;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-family: arial;
  letter-spacing: 2px;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid white;
  animation: typingEffect 4s steps(40) 500ms 1 normal, blinkEffect 500ms steps(40) infinite normal;
}



3. ANIMATION CSS

@keyframes typingEffect {
  from {
    width: 0;
  }
  to {
    width: 15em;
  }
}

@keyframes blinkEffect {
  from {
    border-right-color: white;
  }
  to {
    border-right-color: transparent;
  }
}


4. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download source code, you can download from here and change this according to your need.



Comments

Post a Comment