HTML
** div class=“heart”>**
** div class=“left”>**
** div class=“right”>**
/div>
div class=“shadow”>
** div class=“glow_1”>**
** div class=“glow_2”>**
** div class=“glow_3”>**
** div class=“glow_4”>**
/div>
CSS START HERE
@charset “utf8”;
/* Animated Heart Started Here …
=======================================================================================================================*/
*,
*:after,
*:before,
html
{box-sizing:border-box}
body{
margin:0;
padding:0;
font-family:Tahoma,Geneva,sans-serif;
font-size:16px;
font-style:normal;
font-weight:400;
text-align:center
}
.heart{
width:200px;
height:200px;
top:50%;
left:50%;
z-index:1;
display:block;
position:absolute;
transform:translate(-50%,-50%);
animation:heart 4s ease infinite
}
@keyframes heart{
0%{transform:translate(-50%,-50%) scale(.2,.2)}
8%{transform:translate(-50%,-50%) scale(.4,.4)}
16%{transform:translate(-50%,-50%) scale(.3,.3)}
24%{transform:translate(-50%,-50%) scale(.5,.5)}
32%{transform:translate(-50%,-50%) scale(.4,.4)}
40%{transform:translate(-50%,-50%) scale(.6,.6)}
48%{transform:translate(-50%,-50%) scale(.5,.5)}
56%{transform:translate(-50%,-50%) scale(.7,.7)}
64%{transform:translate(-50%,-50%) scale(.6,.6)}
72%{transform:translate(-50%,-50%) scale(.8,.8)}
80%{transform:translate(-50%,-50%) scale(.7,.7)}
88%{transform:translate(-50%,-50%) scale(.9,.9)}
96%{transform:translate(-50%,-50%) scale(.8,.8)}
100%{transform:translate(-50%,-50%) scale(1,1)}
}
.heart:before{
background:#fff;
content:"";
width:170px;
height:170px;
top:15px;
left:15px;
display:block;
position:absolute;
border-radius:50%
}
.heart div{
background:#ff0000;
width:80px;
height:120px;
top:40px;
display:block;
position:absolute;
border-radius:50%
}
.left
{left:45px;transform:rotate(330deg)}
.right
{right:45px;transform:rotate(30deg)}
.shadow{
width:200px;
height:200px;
top:50%;
left:50%;
display:block;
position:absolute;
transform:translate(-50%,-50%);
animation:shadow 4s ease infinite
}
@keyframes shadow{
0%,96%{transform:translate(-50%,-50%) scale(0,0)}
100%{transform:translate(-50%,-50%) scale(1,1)}
}
[class*=“glow_”]{
background:#ff0000;
width:10px;
height:100%;
top:0;
left:95px;
display:block;
position:absolute;
border-radius:10px
}
.glow_2
{transform:rotate(45deg)}
.glow_3
{transform:rotate(90deg)}
.glow_4
{transform:rotate(135deg)}
/* Animated Heart Ended Here …
=======================================================================================================================*/