Welcome To ITsolutionsGuides,
In this tutorial lets see how to create typing or typewriter effect using css. Typing effect gives a unique look to the website and also it captures the sight of the users therefore using typing or typewriter effect on main texts like company or brand name will gain more attraction. Lets see with the example,
To create the typing effect we will use animation property on the css to increase the width from 0% to 100%. overflow: hidden property is used to hide the text until the animation gets executed. Also nowrap css property to prevent from text wrapping.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.typewriter h1 {
overflow : hidden;
white-space : nowrap;
margin : 0 auto;
letter-spacing: .15em;
animation : typing 3.5s infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
</style>
</head>
<body>
<div class="typewriter">
<h1>Hello, World!</h1>
</div>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides