<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
@import url(http://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%;
}
</style>
</head>
<body>
<div>C</div><div>S</div><div>S</div><div>!</div>
</body>
</html>
