Pure CSS text typing effect with Source Code
generating preview
<html>
<head>
<style>
body{
font-family:'Verdana', sans-serif;
background:#ffffd9;
}
</style>
</head>
<body>
<p class="paragraph"> Designer Desk Online!
<span class="cursor"></span>
</p>
<style>
*{ transition: all 200ms ease-in-out;}
.paragraph{
font-family: Verdana;
font-size: 40px;
padding-left: 50px;
white-space: nowrap;
width: 800px;
overflow: hidden;
animation: 2s typing steps(50, end) infinite;}
.cursor{
width: 4px;
height: 40px;
background-color: lightcoral;
display: inline-block;
animation: 1s blinking infinite;}
@keyframes blinking{
0%{
opacity: 0;}
100%{
opacity: 1;}
}
@keyframes typing{
from{
width: 0;}}
</style>
</body>
</html>
How to Use this Elements / Tutorials:
You Can Use Pure CSS text typing effect elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above Pure CSS text typing effect where ever you want for your project.
Usage of Pure CSS text typing effect :
You Can Use this Pure CSS text typing effect at the the place of of breaking news or any kind of highlighted text. This typing text effect created by pure CSS effect. You can adjust the speed of css property animation. No javascript or jQuery using here. You can also use this CSS typing effect into to any heading tag. Because motion or attract people a lot.