Typewriter Effect with Glowing Text : HTML and CSS

Aug
14

Typewriter Effect with Glowing Text : HTML and CSS

Create a stunning Typewriter Effect with Glowing Text using simple CSS. This step-by-step tutorial shows you how to animate text with a typing simulation followed by a glowing effect. No JavaScript required! Make your text come alive.

Creating a Typing Effect with a Glowing Conclusion using HTML and CSS

Introduction

Engaging the audience is the key to successful web design, and animations can be a powerful tool in your arsenal. This tutorial will guide you through creating a typewriter effect combined with a glowing animation using HTML and CSS.

HTML Structure

First, we'll need to set up our HTML structure. We'll create a div with a class of "typewriter" and include an h1 tag inside it to contain the text we want to animate.

<head>
<link rel="stylesheet" href="index.css">
</head>

<body>
<div class="typewriter">
<h1>Hello, Viewer!</h1>
</div>
</body>

Styling the Body

We'll use CSS to style our body, setting the background color and centering the content. Additionally, we'll import a Google Font to use for our text.

@import "https://fonts.googleapis.com/css?family=Josefin+Sans:400,700";

body,
html {
margin: 0;
font-family: "Josefin Sans", sans-serif;
background: #1f1f1f;
padding-top: 5em;
display: flex;
justify-content: center;
}

Creating the Typing Effect

Next, we'll create the typing effect by animating the text inside the "typewriter" class. We'll use keyframes to simulate the typing effect and add a cursor that blinks at the end of the line.

.typewriter h1 {
color: #fff;
font-family: "Josefin Sans", sans-serif;
overflow: hidden;
border-right: .15em solid rgb(2, 111, 25);
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation: typing 3.5s steps(30, end),
glow 1s ease-in-out infinite alternate 3.5s,
blink-caret .5s step-end infinite;
}

/* Typing effect */
@keyframes typing {
from {
width: 0
}

to {
width: 100%
}
}

/* Typewriter cursor effect */
@keyframes blink-caret {
from,
to {
border-color: transparent
}

50% {
border-color: rgb(2, 111, 25)
}
}

Adding the Glowing Effect

Finally, we'll add the glowing effect. This will make the text glow after it has been typed, providing a visually appealing conclusion to the animation.

@keyframes glow {
from {
text-shadow: 0 0 5px #fff;
}
to {
text-shadow: 0 0 10px #07951f;
}
}

Complete Code Codepen Link : Clickhere

Conclusion

Combining a typing effect with a glowing animation is a unique way to bring attention to specific text on a webpage. This effect is created entirely with CSS, showcasing the power and flexibility of modern CSS animations.

Feel free to modify the colors, timing, or other properties to fit your specific needs. Experimenting with these effects can lead to even more engaging and creative designs.

Contact

Missing something?

Feel free to request missing tools or give some feedback using our contact form.