简单CSS技巧实现的Logo动画效果(很像导航栏上经常运用的效果,但有差别)

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

下面是演示的案例代码

 1 <style>
 2 .imlogo{
 3   display:block;
 4   width:160px;
 5   height:80px;
 6   background:#FF5E52 url(logo2.png) center 22px no-repeat;  /* 写法一般是 先水平位置 ,然后垂直位置*/
 7   -webkit-transition:background-position linear .2s;  /*直线的,线性的。*/
 8   -moz-transition:background-position linear .2s;
 9   transition:background-position linear .2s;    
10 }
11 .imlogo:hover{
12   background-position:center -48px;    
13 }
14 </style>
15 
16 <a class="imlogo" href="#"></a>

 

显示效果:

技术分享

移入之后:

技术分享

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

技术分享

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。