css实现点赞效果

核心的方式是通过 一张背景图中position从左到右移动，
然后transition 中 steps控制帧率来实现效果。

steps：阶跃函数，参数一是把这次过渡分成几段。在这里相隔固定动画时间，采用一段图像，调整图片长宽，保持每张小图相同的间距，调整合适的steps值就可以实现动画的效果。

点赞的图完全可以自己用PS制作。

<div class="box"></div>

.box{
  width: 50px;
  height: 50px;
  background: url(./dianzan.png) no-repeat;
  background-position: left;
  background-size: auto 100%;
}

.boxactive {
  background-position: right;
  transition: background .6s steps(28); //根据图片的长短高度都要不停调
  整steps的值，直到完全没有移动的视觉感出现
}	

boxactive这个属性可以点击之后动态增删，就可以达到效果，
图片：