一个常用网站点赞动画功能实现

/***点赞实现***/
.dianzan{ position:relative; width:15px; height:14px;margin-right:5px; display:inline-block; vertical-align:-1px; }
.dianzan i{ position:absolute; left:0px; top:0px;width:15px; height:14px;transition:all .3s ease-in;-webkit-transition:all .3s ease-in;}
.dianzan i.icon-dz{background:url(../images/icon-dz1.png) no-repeat center; background-size:100% auto;opacity:1; }
.dianzan i.icon-dzon{background:url(../images/icon-dz1on.png) no-repeat center; background-size:100% auto;transform:scale(0); -webkit-transform:scale(0);opacity:0;
transition:all .1s ease-in;-webkit-transition:all .1s ease-in;}
.dianzan.on .icon-dz{ transform:scale(0); -webkit-transform:scale(0); opacity:0; }
.dianzan.on .icon-dzon{transform:scale(1); -webkit-transform:scale(1); transition-delay:.2s;opacity:1;}

<a href="javascript:void(0);" onClick="dz(this)"><span class="dianzan"><i class="icon-dz"></i><i class="icon-dzon"></i></span>343</a>

<script>

function dz(o){
$(o).find(".dianzan").toggleClass("on");
}

</script>