Change font color letter by letter in one word on hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Font

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Font

Description

Change font color letter by letter in one word on hover

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.default,<!--from   w w  w. j  a  v  a 2s .com-->
.hover {
   font-size:19px;
   font-weight:bold;
   color:Chartreuse;
   cursor:pointer;
}

.hover {
   overflow:hidden;
   width:0;
   position:absolute;
   left:0;
   top:0;
   color:yellow;
   white-space:nowrap;
}

.wrapper {
   position:relative;
   display:inline-block;
}

.wrapper:hover .hover {
   width:100%;
   animation:stagger 3s steps(15);
}

@keyframes stagger  {
   from {
      width:0;
   }
   
   to {
      width:100%;
   }

}
</style> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <div class="default">
     Lorem ipsum dolo 
   </div> 
   <div class="hover">
     Lorem ipsum dolo 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials