A Pen by Mikkel Aggerbo

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Mikkel Aggerbo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="holder">
  <ul>
    <li class="ani"><i class="cal"></i></li>
    <li class="ani"><i class="tea"></i></li>
    <li class="ani"><i class="ppl"></i></li>
    <li class="ani"><i class="music"></i></li>
    <li class="ani"><i class="code"></i></li>
  </ul>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mikkelaggerbo/a-pen-by-mikkel-aggerbo-ABbaF */
/*STRUCTURE*/
.holder{
  position:absolute;
  left:50%;
  top:50%;
  margin-left: -350px;
  margin-top: -61px;
}
ul{
 list-style:none; 
  padding-left:0px
}
li{
  float:left;
  margin-right:50px;
  background-color:#568fbf;
  border-radius:60px 60px 60px 60px;

}
li:hover{
  background-color:#003768; 

}
.ani{
  width:104px;
  height:105px;
  cursor:pointer;
  position:relative;
}

/*ANIMATIONS*/

@-webkit-keyframes cal {
    from { background-position: 0px; }
    to { background-position: -780px; }
}
@-webkit-keyframes tea {
    from { background-position: 0px; }
    to { background-position: -1012px; }
}
@-webkit-keyframes ppl {
    from { background-position: 0px; }
    to { background-position: -1100px; }
}
@-webkit-keyframes music {
    from { background-position: 0px; }
    to { background-position: -867px; }
}
@-webkit-keyframes code {
    from { background-position: 0px; }
    to { background-position: -3008spx; }
}
.ani:hover .cal{
  -webkit-animation: cal 0.8s steps(15, end);
  background-position: -780px;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: 2;
}

.cal{
  position:absolute;
  top:29px;
  left:35px;
  background-image:url("https://f.cl.ly/items/033j3N01471E300D283u/Calendar-Sprite.png");
  background-position: 0px, 0px;
  background-repeat:no-repeat;
  height:50px;
  width:50px;
}
.ppl{
  position:absolute;
  top:40px;
  left:25px;
  background-image:url("https://f.cl.ly/items/0F121E1I411u1y2C290A/ppl-sprite-exported.png");
  background-position: 0px, 0px;
  background-repeat:no-repeat;
  height:25px;
  width:55px;
}
.tea{
  position:absolute;
  top:9px;
  left:35px;
  background-image:url("https://f.cl.ly/items/0L2W1m3i262Z1N2j1L2z/tea-sprite.png");
  height:71px;
  width:44px;
}
.ppl{
  background-image:url("https://f.cl.ly/items/1c2C2f2F3g0s0W1J0527/ppl-sprite-exported.png");
}
.animation{
  -webkit-animation: ppl 0.6s steps(20, end);
  -webkit-animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 2
}

.ani:hover .ppl{
  -webkit-animation: ppl 0.6s steps(20, end);
  -webkit-animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 2;
  background-position: -2184px;
}
.ani:hover .tea{
  -webkit-animation: tea 1.6s steps(23, end) infinite;
  background-position: -1012px;
}
.music{
  position:absolute;
  top:29px;
  left:27px;
  background-image:url("https://f.cl.ly/items/0Z2f0W2V3t2e1w001o1v/headphones-sprite.png");
  height:42px;
  width:51px;
}
.ani:hover .music{
  -webkit-animation: music 1s steps(17, end) infinite;
}
.code{
  position:absolute;
  top:0px;
  left:21px;
  background-image:url("https://f.cl.ly/items/072817011k1d3C131J0r/code-sprite.png");
  height:104px;
  width:64px;
}
.ani:hover .code{
  background-image:url("https://f.cl.ly/items/2V3P3I2I450j0B1Q3i1y/Code-sprite.gif");
  
}

Comments