LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

HOVER OVER ME!

CSS
@import url(https://fonts.googleapis.com/css?family=Signika:700,300,600);

html, body { height: 100%; }
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin:20px 0; text-align:center; background:beige; overflow:hidden; }

h1 {
 font-size:5em;
 font:bold 7.5vw/1.6 'Signika', sans-serif;
 -webkit-user-select:none;
    -moz-user-select:none;
     -ms-user-select:none;
         user-select:none;
}

h1 span { display:inline-block; -webkit-animation:float .2s ease-in-out infinite; animation:float .2s ease-in-out infinite; }
 @-webkit-keyframes float {
  0%,100%{ -webkit-transform:none; transform:none; }
  33%{ -webkit-transform:translateY(-1px) rotate(-2deg); transform:translateY(-1px) rotate(-2deg); }
  66%{ -webkit-transform:translateY(1px) rotate(2deg); transform:translateY(1px) rotate(2deg); }
}
 @keyframes float {
  0%,100%{ -webkit-transform:none; transform:none; }
  33%{ -webkit-transform:translateY(-1px) rotate(-2deg); transform:translateY(-1px) rotate(-2deg); }
  66%{ -webkit-transform:translateY(1px) rotate(2deg); transform:translateY(1px) rotate(2deg); }
}
body:hover span { -webkit-animation:bounce .6s; animation:bounce .6s; }
@-webkit-keyframes bounce {
  0%,100%{ -webkit-transform:translate(0); transform:translate(0); }
  25%{ -webkit-transform:rotateX(20deg) translateY(2px) rotate(-3deg); transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ -webkit-transform:translateY(-20px) rotate(3deg) scale(1.1); transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}
@keyframes bounce {
  0%,100%{ -webkit-transform:translate(0); transform:translate(0); }
  25%{ -webkit-transform:rotateX(20deg) translateY(2px) rotate(-3deg); transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ -webkit-transform:translateY(-20px) rotate(3deg) scale(1.1); transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

span:nth-child(4n) { color:hsl(50, 75%, 55%); text-shadow:1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); }
span:nth-child(4n-1) { color:hsl(135, 35%, 55%); text-shadow:1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); }
span:nth-child(4n-2) { color:hsl(155, 35%, 60%); text-shadow:1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); }
span:nth-child(4n-3) { color:hsl(30, 65%, 60%); text-shadow:1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); }

h1 span:nth-child(2){ -webkit-animation-delay:.05s; animation-delay:.05s; }
h1 span:nth-child(3){ -webkit-animation-delay:.1s; animation-delay:.1s; }
h1 span:nth-child(4){ -webkit-animation-delay:.15s; animation-delay:.15s; }
h1 span:nth-child(5){ -webkit-animation-delay:.2s; animation-delay:.2s; }
h1 span:nth-child(6){ -webkit-animation-delay:.25s; animation-delay:.25s; }
h1 span:nth-child(7){ -webkit-animation-delay:.3s; animation-delay:.3s; }
h1 span:nth-child(8){ -webkit-animation-delay:.35s; animation-delay:.35s; }
h1 span:nth-child(9){ -webkit-animation-delay:.4s; animation-delay:.4s; }
h1 span:nth-child(10){ -webkit-animation-delay:.45s; animation-delay:.45s; }
h1 span:nth-child(11){ -webkit-animation-delay:.5s; animation-delay:.5s; }
h1 span:nth-child(12){ -webkit-animation-delay:.55s; animation-delay:.55s; }
h1 span:nth-child(13){ -webkit-animation-delay:.6s; animation-delay:.6s; }
h1 span:nth-child(14){ -webkit-animation-delay:.65s; animation-delay:.65s; }
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID