How we design the typing animation using CSS and HTML
so the following the coding the to designing the typing animation using the CSS and HTML
<html>
<head>
<tittle>Typing animation by using CSS and HTML</tittle>
<style>
body{
background: #000;
padding-top: 10px;
}
p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 4s steps(60, end);
}
p:nth-child(2){
animation: type2 8s steps(60, end);
}
p a{
color: lime;
text-decoration: none;
}
span{
animation: blink 1s infinite;
}
@keyframes type{
from { width: 0; }
}
@keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}
@keyframes blink{
to{opacity: .0;}
}
::selection{
background: black;
}
</style>
</head>
<body>
<p>Hi Friends, This the simplest way the Typing animation by using only HTML and CSS</p>
<p>created with ♥ by
<a href="http://web-tutr.blogspot.com/p/contact-us.html">Web Tutirols</a>
:)<span>|</span></p>
</body>
</html>
If you need this coding just copy and paste this coding.
Real Translator Jobs - New Top Offer! - $100 Bonus To New Affiliates! (view mobile)
he article provided by you is very nice and it is very helpful to know the more information.keep update Ruby on Rails Online Training
ReplyDelete