原理：利用一个正方形，在他的之前之后的伪类里分别添加一个圆形。通过调整两个圆的位置，来凑成一个爱心。
<div class="heart"></div>
.heart{
width:20px;
height:20px;
position:relative;
background-color:#f00;
}
.heart:before,
.heart:after{
content:"";
width:20px;
height:20px;
background-color:#f00;
position:absolute;
border-radius:100px;
}
.heart:before{
top:0px;
left:-100px;
}
.heart:after{
top:-100px;
left:0px;
}
然后把这个形状旋转45度，加一个阴影的效果；如果你想要心跳的的感觉就加一个动画。
.heart{
filter:drop-shadow(0px 0px 20px #f00); //css3新属性.只有ie13和安卓4.4才能兼容。和box-shadow差不多的效果也是加阴影的。只不过box-shadow能加内阴影。兼容性更好一点。
transform:rotate(45deg);
animate:test 1s linear infinite;
}
@keyframes test{ //因为这个属性具有兼容性的问题，所以你还需要写一样的，只有这个头部改变的3个@-webkit-keyframes test，@-moz-keyframes test @-ms-keyframes test
0%{transform:rotate(45deg) scale(0.8,0.8);opacity=1; }
25%{transform:rotate(45deg) scale(1,1);opacity=0.8; }
100%{transform:rotate(45deg) scale(0.8,0.8);opacity=1; }
}
