点赞变换样式的特效

		 <p>
		 	<span class="praise"><img class="praise-pic"                               
             src="static/images/graypraise.png" alt=""></span>	
		 	<span class="praise-num">58</span>
		 	<span class="change-num"><em>+1</em></span>
		 </p>

/* 点赞动态样式 */

.browse .praise {
    display: block;
    position: relative;
    width: 15px;
    height: 15px;
}

.praise img.animation {
    animation: myfirst 0.5s;
    -moz-animation: myfirst 0.5s;
    -webkit-animation: myfirst 0.5s;
    -o-animation: myfirst 0.5s;
}

.change-num {
    display: none;
    position: relative;
}

.change-num .add-animation {
    color: #24bf9a;
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 0.7rem;
    opacity: 0;
    filter: Alpha(opacity=0);
    -moz-opacity: 0;
    animation: mypraise 0.5s;
    -moz-animation: mypraise 0.5s;
    -webkit-animation: mypraise 0.5s;
    -o-animation: mypraise 0.5s;
    font-style: normal;
}


/*点赞图标放大动画开始*/

@keyframes myfirst {
    0% {
        width: 15px;
        height: 15px;
    }
    50% {
        width: 30px;
        height: 30px;
    }
    100% {
        width: 15px;
        height: 15px;
    }
}

@-moz-keyframes myfirst
/* Firefox */

{
    0% {
        width: 15px;
        height: 15px;
    }
    50% {
        width: 30px;
        height: 30px;
    }
    100% {
        width: 15px;
        height: 15px;
    }
}

@-webkit-keyframes myfirst
/* Safari 和 Chrome */

{
    0% {
        width: 15px;
        height: 15px;
    }
    50% {
        width: 30px;
        height: 30px;
    }
    100% {
        width: 15px;
        height: 15px;
    }
}

@-o-keyframes myfirst
/* Opera */

{
    0% {
        width: 15px;
        height: 15px;
    }
    50% {
        width: 30px;
        height: 30px;
    }
    100% {
        width: 15px;
        height: 15px;
    }
}


/*点赞图标放大动画结束*/


/*点赞数量加减动画开始*/

@keyframes mypraise {
    0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
    }
    25% {
        top: -20px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
    }
    50% {
        top: -25px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1;
    }
    75% {
        top: -30px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
    }
    100% {
        top: -35px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
    }
}

@-moz-keyframes mypraise
/* Firefox */

{
    0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
    }
    25% {
        top: -20px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
    }
    50% {
        top: -25px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1;
    }
    75% {
        top: -30px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
    }
    100% {
        top: -35px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
    }
}

@-webkit-keyframes mypraise
/* Safari 和 Chrome */

{
    0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
    }
    25% {
        top: -20px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
    }
    50% {
        top: -25px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1;
    }
    75% {
        top: -30px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
    }
    100% {
        top: -35px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
    }
}

@-o-keyframes mypraise
/* Opera */

{
    0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
    }
    25% {
        top: -20px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
    }
    50% {
        top: -25px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1;
    }
    75% {
        top: -30px;
        opacity: 0.5;
        filter: Alpha(opacity=50);
        -moz-opacity: 0.5;
    }
    100% {
        top: -35px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0;
    }
}

/*点赞动态效果*/
$(function(){
		$('.villagerInfo ul li').each(function(index,el){		
			var _this=$(this);
			var praise=_this.find('.praise')
			praise.on('click',function(){
			var praise_img = _this.find('.praise-pic');
			var text_box =  _this.find(".change-num");
			var praise_txt =_this.find(".praise-num");
			var num=parseInt(praise_txt.text());
			if(praise_img.attr("src") == ("static/images/greenpraise.png")){
				$(this).html("<img src='static/images/graypraise.png' class='praise-pic animation' />");
	         	text_box.show().html("<em class='add-animation'>-1</em>");
				num -=1;
				praise_txt.text(num)
			}else{			
				$(this).html("<img src='static/images/greenpraise.png' class='praise-pic animation' />");
				text_box.show().html("<em class='add-animation'>+1</em>");
				num +=1;
				praise_txt.text(num)
			}
		});
		})

	})

本篇内容是针对于类似微信朋友圈的点赞，点赞数量增加，跟着样式也改变