Lovely Heart Beat Effect Using Pure CSS3
Hi, guys. As I promised in my previous post today I'm gonna share you another cool CSS3 effect. In this tutorial we will use CSS3 animation, transition, transform property to create this effect. Let's just start.
Let's first create a HTML first.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 Heart Beat:techumber</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 class="logo"><a href="//techumber.com">Techumber</a></h1>
<figure class="heart-wrap">
<figure class="heart"></figure>
</figure>
</body>
</html>
We are not using any images for our heart symbol. We will create the heart symbol in CSS. Let's create a style.css file and start adding code.
* {
border: 0;
margin: 0;
padding: 0;
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-box-sizing: border-box;
}
body {
background: #1a1a1a;
}
.heart-wrap {
position: relative;
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
z-index: 0;
border: 1px solid #aa5edf;
border-radius: 50%;
}
Here we have basic reset and heart-wrap is used as heart holder. Now let's create our actual heart class.
.heart {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 90px;
margin-top: -35px;
margin-left: -50px;
z-index: 5;
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-ms-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-webkit-animation: beat 1s infinite;
-o-animation: beat 1s infinite;
animation: beat 1s infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #aa5edf;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100% 0;
-moz-transform-origin: 0 100% 0;
-ms-transform-origin: 0 100% 0;
-o-transform-origin: 0 100% 0;
transform-origin: 0 100% 0;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100% 0;
-moz-transform-origin: 100% 100% 0;
-ms-transform-origin: 100% 100% 0;
-o-transform-origin: 100% 100% 0;
transform-origin: 100% 100% 0;
}
By using CSS pseudo class we got it as.
If you observer in heart class we have added a css3 animation of keyframe name beat. Now, let's create that animation keyframes.
@-webkit-keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
@-moz-keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
@-ms-keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
@-o-keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
@keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
we have created beat keyframe. Finally, Combile all css
style.css
* {
border: 0;
margin: 0;
padding: 0;
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-box-sizing: border-box;
}
body {
background: #1a1a1a;
}
.logo {
text-align: center;
margin: 50px 0;
font-size: 170px;
font-family: monospace;
}
.logo a {
color: #fff;
}
.heart-wrap {
position: relative;
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
z-index: 0;
border: 1px solid #aa5edf;
border-radius: 50%;
}
.heart {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 90px;
margin-top: -35px;
margin-left: -50px;
z-index: 5;
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-ms-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
-webkit-animation: beat 1s infinite;
-o-animation: beat 1s infinite;
animation: beat 1s infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #aa5edf;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100% 0;
-moz-transform-origin: 0 100% 0;
-ms-transform-origin: 0 100% 0;
-o-transform-origin: 0 100% 0;
transform-origin: 0 100% 0;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100% 0;
-moz-transform-origin: 100% 100% 0;
-ms-transform-origin: 100% 100% 0;
-o-transform-origin: 100% 100% 0;
transform-origin: 100% 100% 0;
}
@-webkit-keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
@-moz-keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
@-ms-keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
@-o-keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
@keyframes beat {
0% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
20% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
21% {
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-ms-transform: scale(1.9);
-o-transform: scale(1.9);
transform: scale(1.9);
}
100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
Hope you like it. Thanks......