使用css排版推特上的星星爆炸效果。

hover效果实现。
我们先贴上雪碧图

此次效果利用到css的steps（）方法，
那steps（）是什么呢。
steps（）阶跃函数，是transition-timing-function和animation-timing-function两个属性的属性值，他是表示两个关键帧之间的动画效果，默认是ease。
steps（）有两个参数：参数一是把这次过渡分成几段，这几段其实是在时间上分为几段去显示执行。参数二是表示分成几段后，他是start还是end去执行动画。参数二有两个可选值start和end，默认是end。
接下来我们贴上html代码：

<div class="star"></div>

只需要一个块元素即可

接下来贴上css代码：

.star {
      width: 70px;
      height: 50px;
      background: url(twitter_fave.png) no-repeat;
      background-position: 0 0;
    }

    .star:hover {
      background-position: -3519px 0;
      transition: background 1s steps(55);
    }

在hover事件里，使用steps方法逐步移动雪碧图。
在过渡动画里，我们过渡改变background背景，同时在1s钟完成55步的动画操作。
OK，一个动态的星星爆炸效果就完成啦。