A Pen by Eric J Nesser

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

Technologies

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

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

  
</head>

<body>

  <div class="box">

  <img class="car" src="https://s17.postimg.org/61t6xvpdb/car.png" alt="car">
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/enesser/a-pen-by-eric-j-nesser-yYYgQv */
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body {
  background: #fff;
  color: #5c5a5d;
  font-family: 'Montserrat', sans;
}

.box {
  height: 400px;
  margin: 4em auto;
  padding: 2.4em;
  position: relative;
  display: block;
  width: 400px;
}
.box .car {
  bottom: -90px;
  max-width: 600px;
  position: absolute;
  left: 80px;
  z-index: 100;
  -webkit-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
  -webkit-animation: hr 2s infinite;
          animation: hr 2s infinite;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}

@-webkit-keyframes hr {
  from {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}

@keyframes hr {
  from {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}

Comments