Realistic Heartbeat v1.5

In this example below you will see how to do a Realistic Heartbeat v1.5 with some HTML / CSS and Javascript

This is just a quick mock up of a realistic heartbeat for an AUK project

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

<head>
  <meta charset="UTF-8">
  <title>Realistic Heartbeat v1.5</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="services">
  <ul class="services__list">
    <li class="services__list__item">Services</li>
    <li class="services__list__item">Strategy</li>
    <li class="services__list__item">Creative</li>
    <li class="services__list__item">Digital</li>
    <li class="services__list__item">Social & PR</li>
    <li class="services__list__item">Media</li>
  </ul>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/GriffinArtworks/realistic-heartbeat-v15-qdvWmP */
* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'din';
  src: url("http://mattgriff.in/external_resources/DINCondensed-Bold.eot");
  src: url("http://mattgriff.in/external_resources/DINCondensed-Bold.eot?#iefix") format("embedded-opentype"), url("DINCondensed-Bold_gdi.woff") format("woff"), url("http://mattgriff.in/external_resources/DINCondensed-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@keyframes heartbeat {
  0% {
    transform: scale(0.97, 0.985);
  }
  13% {
    transform: scale(0.97, 0.99);
  }
  16% {
    opacity: 0.65;
  }
  19% {
    transform: scale(1.0005, 1);
  }
  19.5% {
    transform: skew(1deg);
  }
  20% {
    transform: rotate(-0.7deg);
  }
  26% {
    opacity: 0.8;
  }
  60% {
    opacity: 0.7;
  }
  100% {
    transform: scale(0.97, 0.985);
  }
}
.services__list {
  position: relative;
  list-style: none;
  padding: 0em;
  margin: 0em;
  font-family: 'din', sans;
  text-transform: uppercase;
  font-size: 4em;
  text-align: center;
}
.services__list__item {
  position: relative;
  display: block;
  margin: 0 auto;
}
.services__list:after {
  content: '';
  opacity: 0.6;
  background: url(http://mattgriff.in/external_resources/heart.gif);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0em;
  top: 0em;
  transform-origin: 45% 20%;
  animation: heartbeat 0.8s infinite;
  margin: 0 auto;
}

Comments