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這個屬性可以點擊之後動態增刪，就可以達到效果，
圖片：