之前不少人提过说要实现像阿里百秀Logo那样的动画效果,为了满足广大用户的需求,这里就简单做个演示。东西相对较简单,所以不要认为你搞不定它。
下面是演示的案例代码,
<style>.imlogo{display: block;width: 160px;height: 80px;background: #FF5E52 url(你的图片地址) center 22px no-repeat;-webkit-transition: background-position linear .2s;-moz-transition: background-position linear .2s;transition: background-position linear .2s;}.imlogo:hover{background-position: center -48px;}</style><a class="imlogo" href="#"></a>
下面是演示的案例代码,
<style>.imlogo{display: block;width: 160px;height: 80px;background: #FF5E52 url(你的图片地址) center 22px no-repeat;-webkit-transition: background-position linear .2s;-moz-transition: background-position linear .2s;transition: background-position linear .2s;}.imlogo:hover{background-position: center -48px;}</style><a class="imlogo" href="#"></a>