This article tells you how to use HTML + CSS to achieve typing effect.
1. How To Implement Typing Effect Use Html + CSS.
- You can think there are 3 layers of the typing effects.
- The bottom layer is the text layer.
- The middle layer is the background that cover the text.
- The top layer shows the cursor.
- The text layer is static, while the background in the middle layer and the cursor at the top layer are dynamic.
- Initially, the background covers all the text and the cursor is at the far left point.
- As the animation progresses, the background and cursor move from left to right at the same pace.
- At the end of the animation, the background no longer covers the text, and the cursor blinks on the far right point.
2. Example Source Code.
- Create a Html file implement_typing_effect_use_html_css.html.
- Copy and paste the below Html source code to the above file.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Implement Typing Effect Use Html + CSS</title> <style> :root { /* number of characters in the displayed string in the html div element. */ --steps: 56; /* animation duration, the total time that will cost to print the text string. */ --duration: 10s; /* font size */ --fontSize: 50px; /* cursor size */ --cursorSize: 20px; } .text { color: #333;; position: relative; display: inline-block; font-family: 'Courier New', Courier, monospace; font-size: var(--fontSize); line-height: 1; } .text::after { content: ''; width: var(--cursorSize); height: var(--fontSize); background-color: black; z-index: 2; position: absolute; animation: blink 1s var(--duration) step-end infinite, moveCursor var(--duration) steps(var(--steps)) forwards; } .text::before { content: ''; width: 100%; height: var(--fontSize); z-index: 1; position: absolute; background: linear-gradient(#fff, #fff) no-repeat top right; animation: showText var(--duration) steps(var(--steps)) forwards; } /* Cursor blink animation */ @keyframes blink { 0% { background-color: black; } 50% { background-color: transparent; } 100% { background-color: black; } } /* Cursor move animation */ @keyframes moveCursor { 0% { left: 0%; } 100% { left: 100%; } } /* background move animation */ @keyframes showText { 0% { background-size: 100% 100%; } 100% { background-size: 0% 100%; } } </style> </head> <body> <div class="text">This typing effect is implemented use Html & CSS!</div> </body> </html>
3. The Demo Video For The Typing Effect Animation.