简单CSS3技巧实现的Logo动画

2015/8/16 0:09:00  人气 1809    模板学院  
之前不少人提过说要实现像阿里百秀Logo那样的动画效果,为了满足广大用户的需求,这里就简单做个演示。东西相对较简单,所以不要认为你搞不定它。
之前不少人提过说要实现像阿里百秀Logo那样的动画效果,为了满足广大用户的需求,这里就简单做个演示。东西相对较简单,所以不要认为你搞不定它。
下面是演示的案例代码,你也可以点击查看动画效果 http://www.daqianduan.com/example?pid=5805
<style>
.imlogo{
*: block;
width: 160px;
height: 80px;
background: #FF5E52 url(http://www.daqianduan.com/wp-content/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;
}
</style>
<a class=“imlogo“ href=“#“></a>
其实你只需要改变其中的图片地址、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为你的位置即可,不会计算的话直接多试几个就能知道哪个合适了。

. 微信,微博,QQ空间点击右上角的三个点分享给朋友。经典话题等你参与。关注baishiwlkj公众号成

发表回复

   


  通知楼主
暂无回复!