首页 > 代码库 > 简单CSS技巧实现的Logo动画效果（很像导航栏上经常运用的效果，但有差别）
简单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为你的位置即可，不会计算的话直接多试几个就能知道哪个合适了。
简单CSS技巧实现的Logo动画效果（很像导航栏上经常运用的效果，但有差别）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。