How to create Typing Text effect using HTML and CSS.

How to create Typing Text effect using HTML and CSS

CSS Typing Effect | Text typing effect using HTML and CSS | typing effect in CSS | How to make text as typewriter in HTML | CSS Typewriter effect | How to create multi-line typewriter effect using HTML and CSS | how to create Typewriter effect in HTML | CSS effects | HTML Effects tutorials | text effects using HTML and CSS | text effect in CSS | How to create HTML document with Typing text effect | How to create HTML document with Typewriter effect

Hello friends today we are going to know how to make text type effect using HTML and CSS. So to start we have created two document one is for HTML code and second is for CSS code. So lets get started:

You can see the live demo by clicking below link:

https://glriihdzxu0ems6zqhc8tg-on.drv.tw/mthschools.tech/www.TypewriterEffect.com/

You can paste the HTML code to your HTML file and save it by “.html” extension and place CSS code to CSS file by giving extension “.css”. As well as don’t forget to link your CSS document to your HTML document by using “link” tag inside head element of your HTML document.

HTML Code

<!DOCTYPE html>

<html>

<head>

<title>MTH Typewriter Effect Using HTML and CSS</title>

</head>

<body>

<h1>

This is a Typing Effect

</span>

</h1>

</div>

<h1>

<span class="multiLineEffect_Text_1">This is Multi-line Typing Effect</span><span class="multiLineEffect_Text_2">This is Second Line.</span>

</h1>

</div>

</body>

</html>

In above code we have taken 2 div element inside our body one is for our single line effect and other is for multi-line effect example.

The text we have given under “h1” “element” which is present under “span” element of “h1” element.

To know more about HTML tags or element check out our article on HTML Tags.

CSS Code

/*Document Format Code Starts from Here*/

margin: 0;

padding: 0;

}

div{

width: 100%;

height: 768px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

color: #f6f6f6;

font-family: "Raleway";

font-size: 25px;

}

.firstEffect{

background-color: #373737;

}

.secondEffect{

background-color: tomato;

}

/*Single Line Code Starts from Here*/

.singleLineEffect{

overflow: hidden;

white-space: nowrap;

animation: typewriter;

display: inline-block;

position: relative;

animation-duration: 10s;

animation-timing-function: steps(25, end);

animation-iteration-count: infinite;

}

.singleLineEffect::after{

content: "|";

position: absolute;

right: 0;

animation: caret infinite;

animation-duration: 1s;

animation-timing-function: steps(1, end);

}

@keyframes typewriter {

0%, 100% {

width: 0;

}

20%, 80% {

width: 10.2em;

}

}@keyframes caret {

0%, 100% {

opacity: 0;

}

50% {

opacity: 1;

}

/*Multiline Code Starts from Here*/

.multiLineEffect_Text_1 {

animation: text1;

}

.multiLineEffect_Text_2 {

animation: text2;

}

.multiLineEffect_Text_1, .multiLineEffect_Text_2 {

overflow: hidden;

white-space: nowrap;

display: inline-block;

position: relative;

animation-duration: 20s;

animation-timing-function: steps(25, end);

animation-iteration-count: infinite;

}

.multiLineEffect_Text_1::after, .multiLineEffect_Text_2::after {

content: "|";

position: absolute;

right: 0;

animation: caret infinite;

animation-duration: 1s;

animation-timing-function: steps(1, end);

}

@keyframes text2 {

0%, 50%, 100% {

width: 0;

}

60%, 90% {

width: 21.2em;

}

}@keyframes text1 {

0%, 50%, 100% {

width: 0;

}

10%, 40% {

width: 17em;

}

the above CSS code is contains animation and key-frame elements which help us to make our text animated and it run as Typing of text over screen. You can use the above code to a separate CSS document or you can paste it to your HTML document under head section by creating “style” tag under “head” tag.

Check out the live demo :

https://glriihdzxu0ems6zqhc8tg-on.drv.tw/mthschools.tech/www.TypewriterEffect.com/

Hope you enjoyed this tutorial and learnt something new. Keep in track our tutorials.

Feel free to leave your valuable comments below: