css3跳动红心

原理：利用一个正方形，在他的之前之后的伪类里分别添加一个圆形。通过调整两个圆的位置，来凑成一个爱心。

<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; }

}