<!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;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
