How/Who are you.

In this example below you will see how to do a How/Who are you. with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Symsym, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Symsym ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>How/Who are you.</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Hi,
  <span class="h-l">h</span><span class="o-l">o</span><span class="w-l">w</span>
  are you ?
</h1>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Symsym/howithwho-are-you-pFerb */
body {
  background: #252525;
  color: #fff;
}
body:hover {
  background: #b11a1a;
}
h1 {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: "Courier";
  font-weight: normal;
  font-size: 80px;
}
.h-l {
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  transition: left 0.2s ease-in;
}
.o-l {
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  transition: left 0.2s ease-in;
}
.w-l {
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  transition: left 0.2s ease-in;
}
h1:hover>.h-l {
  left: 49px;
}
h1:hover>.o-l {
  left: 49px;
}
h1:hover>.w-l {
  left: -98px;
}
body h1:hover {
  background: #b11a1a;
}

Comments