简单CSS3技巧实现阿里百秀Logo动画

div+css

之前不少人提过说要实现像阿里百秀Logo那样的动画效果，为了满足广大用户的需求，这里就简单做个演示。东西相对较简单，所以不要认为你搞不定它。

阿里百秀logo

查看演示

下面是案例代码

<style>
.imlogo{
	display: block;
	width: 160px;
	height: 80px;
	background: #FF5E52 url(https://pdbn.top/uploads/2016/03/logo2.png) 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.css最后加上，再做个原来Logo高度2倍的图先替换，然后更改其中的-48为你的位置即可，不会计算的话直接多试几个就能知道哪个合适了。