html logo动画效果图,简单CSS3技巧实现的Logo动画

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

下面是案例代码

.imlogo{

display: block;

width: 160px;

height: 80px;

background: #FF5E52 url(https://themebetter.com/uploads/2015/01/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;

}

其实你只需要改变其中的图片地址、Logo区域大小(160px和80px)背景图的坐标(22px和-48px)，你就能实现自己的动画了，如果你很懒，那就做个119*100px的logo即可，像下面这样的一张图(背景做成透明的，png格式，即可实现代码改变颜色)。

xiu主题用户动态Logo专用方案：

.logo a{

-webkit-transition: background-position linear .2s;

-moz-transition: background-position linear .2s;

transition: background-position linear .2s;

}

.logo a:hover{

background-position: center -48px;

}

在主题的style.css最后加上，再做个原来Logo高度2倍的图先替换，然后更改其中的-48为你的位置即可，不会计算的话直接多试几个就能知道哪个合适了。