Pure CSS realizes cursor typing effect, pure CSS typing dynamic effect

This article mainly introduces Pure css Realize the typing animation effect, display the characters in a paragraph of text one by one, simulate a typing effect, and improve the web page through this effect Design I hope that the introduction of this article can have some reference value for your study or work

The effect is as follows:

Create an HTML page and add the following html code to the body:

 <p class="load-text"> loading ...</p>

CSS code:

 /*Cursor animation*/ @keyframes caret { 50% { border-color:transparent; } }/*Text animation: from width 0*/ @keyframes text { from { width:0; } }.load-text { width:11ch; margin:0 auto; overflow:hidden; word-break :keep-all; color:#b1f1f3; border-right:3px solid #000000; font:bold 400% monospace; animation :caret 0.5s step-end infinite,text 5s infinite steps(11); }

Note: width in css code: 11ch and eleven Set according to the character length.