A Pen by Mikkel Aggerbo

Tutorials of (A pen by mikkel aggerbo) by Mikkel aggerbo

<!DOCTYPE html>
<html >
<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/ */
/*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");
  
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( A Pen by Mikkel Aggerbo ) is write by Mikkel Aggerbo, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Mikkel Aggerbo