Edit on
Hover and Click on the text below

<span>
<div>L</div><div>O</div><div>S</div><div>T</div>
</span>

@import  url(https://fonts.googleapis.com/css?family=*);
body
{
 font-family:calibri;
}
div
{
  top:103px;
  opacity:0.4;
  position:absolute;
  color:white;
  text-align:center; 
  font: 170px jokerman;
  text-shadow:1px 1px 5px #dddddd,2px 2px 5px #ffffff,3px 3px 5px #ffffff,4px 4px 5px #ffffff,5px 5px 5px #ffffff,6px 6px 5px #adadad,7px 7px 5px #adadad,8px 8px 5px #adadad,9px 9px 5px #adadad,10px 10px 5px #adadad,11px 11px 5px ,12px 12px 5px ;
  transition:opacity 500ms linear,text-shadow 500ms ease-in-out,color 300ms linear;
}
div:hover
{
  opacity:0.8;
  text-shadow:1px 1px #454545;
  color:red;
  text-shadow:0px 0px 20px #000000;
  animation:myanim 100ms infinite linear;
}
div:active
{
  opacity:0.8;
  text-shadow:1px 1px 5px #000000,2px 2px 5px #000000,3px 3px 5px #000000,4px 4px 5px #000000,5px 5px 5px #000000,6px 6px 50px #000000,7px 7px 5px #000000,8px 8px 5px #000000,9px 9px 5px #000000,10px 10px 5px #000000,11px 11px 5px #000000,12px 12px 5px #000000,13px 13px 5px #000000,14px 14px 5px #000000,15px 15px 5px #000000,16px 16px 5px #000000,16px 16px 5px #000000,17px 17px 5px #000000,18px 18px 5px #000000,19px 19px 5px #000000; 
}
@keyframes myanim 
{
  10%{transform:scale(1)rotate(0deg);}
  20%{transform:scale(1)rotate(-3deg);}
  80%{transform:scale(1)rotate(3deg);}
  100%{transform:scale(1)rotate(0deg);}
}
div:nth-child(1)
{  
  left:10%;  
}
div:nth-child(2)
{  
  left:28%;  
}
div:nth-child(3)
{  
  left:50%;  
}
div:nth-child(4)
{  
  left:70%;  
}
Rerun