最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3实现的Logo动画效果例子
时间：2015-06-10 编辑：简简单单 来源：一聚教程网
下面是演示的案例代码，
其实你只需要改变其中的图片地址、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为你的位置即可，不会计算的话直接多试几个就能知道哪个合适了。
css3动画实例
动画笔记
相关文章
- 用CSS3来实现逐渐发光的方格边框 05-17
- CSS3背景下的@font face有什么规则 05-06
- 详解CSS3中nth-child与nth-of-type的区别 01-10
- CSS3,线性渐变（linear-gradient）的使用总结 01-10
- CSS3动画特效制作教程 好看的CSS3动画特效 01-04
- CSS3 Flexbox属性用法大全 CSS3 Flexbox各种属性详解 01-04