@mrjopino

<div id="core">

  <p id="mrjopino">

    <span id="texto">@mrjopino</span>

  </p>

</div>

html {

  overflow: hidden; 

  height: 100%;

  font-family: Geneva, sans-serif;

  background: hsl(210, 30%, 0%) radial-gradient( hsl(210, 30%, 20%), hsl(210, 30%, 0%));

}

body {

  margin: 0;

  width: 100%;

  height: 100%;

  text-align: center;

  display: flex;

  justify-content: center;

  align-items: center;

}

p {

    margin: 0;

}

#core {

  padding: 100px;

  text-align: center;

  min-width: 500px;

  font-size: 3em;

  font-weight: bold;

  -webkit-backface-visibility: hidden; /* fixes flashing */

}

#mrjopino {

  color: hsla(0,0%,0%,0);

  perspective: 80px;

  outline: none;

}

#texto {

  display: inline-block;

  text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;

  transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);

}

/* MOvimiento */

#core:hover #texto {

  margin-left: 20px;

  transition: margin-left 1s cubic-bezier(0, 0.75, 0, 1);

}