Float on Hover

In this example below you will see how to do a Float on Hover with some HTML / CSS and Javascript

Link that floats on hover. Kinda fun. Some work should go into a better set of keyframes, but I'm happy with this as a proof of concept.

Thumbnail
This awesome code was written by scarl3tt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright scarl3tt ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Float on Hover</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class='parent'>
  <a class='item link'>A</a>
</div>
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/scarl3tt/float-on-hover-aABqE */
@-webkit-keyframes float {
  0% {
    -webkit-transform: translate(-1px, 0px) translate(-50%, -50%) rotateX(4deg) rotateY(11deg) rotateZ(1deg);
            transform: translate(-1px, 0px) translate(-50%, -50%) rotateX(4deg) rotateY(11deg) rotateZ(1deg);
  }
  20% {
    -webkit-transform: translate(4px, 4px) translate(-50%, -50%) rotateX(-5deg) rotateY(7deg) rotateZ(-1deg);
            transform: translate(4px, 4px) translate(-50%, -50%) rotateX(-5deg) rotateY(7deg) rotateZ(-1deg);
  }
  40% {
    -webkit-transform: translate(1px, 0px) translate(-50%, -50%) rotateX(-11deg) rotateY(-14deg) rotateZ(-14deg);
            transform: translate(1px, 0px) translate(-50%, -50%) rotateX(-11deg) rotateY(-14deg) rotateZ(-14deg);
  }
  60% {
    -webkit-transform: translate(-4px, 1px) translate(-50%, -50%) rotateX(-5deg) rotateY(-8deg) rotateZ(-4deg);
            transform: translate(-4px, 1px) translate(-50%, -50%) rotateX(-5deg) rotateY(-8deg) rotateZ(-4deg);
  }
  80% {
    -webkit-transform: translate(-1px, -4px) translate(-50%, -50%) rotateX(-2deg) rotateY(-11deg) rotateZ(6deg);
            transform: translate(-1px, -4px) translate(-50%, -50%) rotateX(-2deg) rotateY(-11deg) rotateZ(6deg);
  }
  100% {
    -webkit-transform: translate(2px, 3px) translate(-50%, -50%) rotateX(4deg) rotateY(-2deg) rotateZ(-11deg);
            transform: translate(2px, 3px) translate(-50%, -50%) rotateX(4deg) rotateY(-2deg) rotateZ(-11deg);
  }
}
@keyframes float {
  0% {
    -webkit-transform: translate(-1px, 0px) translate(-50%, -50%) rotateX(4deg) rotateY(11deg) rotateZ(1deg);
            transform: translate(-1px, 0px) translate(-50%, -50%) rotateX(4deg) rotateY(11deg) rotateZ(1deg);
  }
  20% {
    -webkit-transform: translate(4px, 4px) translate(-50%, -50%) rotateX(-5deg) rotateY(7deg) rotateZ(-1deg);
            transform: translate(4px, 4px) translate(-50%, -50%) rotateX(-5deg) rotateY(7deg) rotateZ(-1deg);
  }
  40% {
    -webkit-transform: translate(1px, 0px) translate(-50%, -50%) rotateX(-11deg) rotateY(-14deg) rotateZ(-14deg);
            transform: translate(1px, 0px) translate(-50%, -50%) rotateX(-11deg) rotateY(-14deg) rotateZ(-14deg);
  }
  60% {
    -webkit-transform: translate(-4px, 1px) translate(-50%, -50%) rotateX(-5deg) rotateY(-8deg) rotateZ(-4deg);
            transform: translate(-4px, 1px) translate(-50%, -50%) rotateX(-5deg) rotateY(-8deg) rotateZ(-4deg);
  }
  80% {
    -webkit-transform: translate(-1px, -4px) translate(-50%, -50%) rotateX(-2deg) rotateY(-11deg) rotateZ(6deg);
            transform: translate(-1px, -4px) translate(-50%, -50%) rotateX(-2deg) rotateY(-11deg) rotateZ(6deg);
  }
  100% {
    -webkit-transform: translate(2px, 3px) translate(-50%, -50%) rotateX(4deg) rotateY(-2deg) rotateZ(-11deg);
            transform: translate(2px, 3px) translate(-50%, -50%) rotateX(4deg) rotateY(-2deg) rotateZ(-11deg);
  }
}
.parent {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-perspective: 250px;
          perspective: 250px;
}

.link {
  cursor: pointer;
}

.item {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  background: red;
  color: white;
  font-size: 45px;
  text-align: center;
  padding: 0;
  top: 50%;
  left: 50%;
  transition: all ease-in-out 0.2s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 2px;
}
.item:hover {
  animation: float linear alternate-reverse infinite 5s;
}

Comments