我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
代码部分
<div class="box" >
<button onClick="addStar()" >给我点赞吧</button>
<div class="box-con" id="box-con" >
</div>
</div>
代码思路：只设置一个默认的div，每次点击对爱心区域新增一个dom元素，原始生成的时候使用动画来进行移动轨迹的设置，主要是通过animation来实现元素的过度效果，将爱心移动的过程分成五个百分比，每个百分比来进行对应的处理。
处理各个阶段的动画：由于点赞效果不是单一的移动，所以在移动过程中，需要对轨迹进行偏移的操作，这里设置的比较简单，只用到了margin来对元素进行偏移，这样就能有在上升的时候左右摆动的点赞效果
@keyframes myStart2{
0% {margin-top:0px; width:14px;height:10px;;margin-left: 0px;}
20% {margin-top:20px; width:16px;height:12px;margin-left: 13px;}
40% {margin-top:40px; width:18px;height:15px;margin-left: 24px;}
60% {margin-top:60; width:21px;height:18px;margin-left: 26px;}
80% {margin-top:80; width:24px;height:20px;margin-left: 18px;}
100% {margin-top:100px; width:27px;height:22px;margin-left: 10px;opacity: 0;}
}
若隐若现的效果：有animation的一个默认属性animation-fill-mode的值是none，所以执行到最后的100%时，元素总会重新回到0%的位置，所以需要对该属性设置为forwords，这样动画效果结束之后，就会停留在100%，对100%设置隐藏效果opcity为0，则是最后隐藏元素，但是最后一刻隐藏会比较生硬，所以就用到了linear对动画效果线性移动和渐变，看起来隐藏效果也是从100到0慢慢渐变消失
