实现动态效果基本上都是用到定时器，修改标签的位置大小颜色属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zan{
line-height: 20px;
20px;
height: 20px;
position: relative;
}
</style>
</head>
<body>
<div style=" 500px;height: 300px;padding-left: 100px;padding-top: 150px">
<div class="zan">
<span>赞</span>
</div>
<hr><br>
<div class="zan">
<span>赞</span>
</div>
<hr><br>
<div class="zan">
<span>赞</span>
</div>
<hr><br>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$('.zan').click(function () {
var top = 0;
var left = 0;
var fontSize = 12;
var opacity = 1;
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('position','absolute');
$(tag).css('float','left');
$(tag).css('color','blue');
$(tag).css('top',top + "px");
$(tag).css('left',left + "px");
$(tag).css('font-size',fontSize + "px");
$(tag).css('opacity',opacity);
$(this).append(tag);
var obj = setInterval(function () {
top = top - 5;
left = left + 5;
fontSize = fontSize + 5;
opacity = opacity - 0.2;
$(tag).css('top',top + "px");
$(tag).css('left',left + "px");
$(tag).css('font-size',fontSize + "px");
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
tag.remove();
}
},100);
});
</script>
</body>
</html>