CSS3实现的Logo动画效果例子
下面是演示的案例代码，
<style>
.imlogo{
display: block;
width: 160px;
height: 80px;
background: #FF5E52 url(/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为你的位置即可，不会计算的话直接多试几个就能知道哪个合适了。
css3动画实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<h3>动画笔记</h3>
<style>
h3{margin: 0 auto;width: 100px;}
.loading-demo{height: 60px; width: 60px;margin: 20px auto;position: relative;}
.act1,.act2{height: 100%;width: 100%;border-radius: 50%;background: #26c1ce;position: absolute;top: 0;left: 0;
-webkit-animation: loading 2s infinite ease-in-out ;
-moz-animation: loading 2s infinite ease-in-out;
animation: loading 2s infinite ease-in-out;
/*动画名字 动画时间 循环 开始最后缓慢*/
opacity: .6;
}
/*颜色加深是因为重叠了*/
.act2{-webkit-animation-delay:-1s;}
@-webkit-keyframes loading{
0%,100%{ -webkit-transform: scale(0.0)}
50%{ -webkit-transform: scale(1.0)}
}
@-moz-keyframes loading{
0%,100%{ -webkit-transform: scale(0.0)}
50%{ -webkit-transform: scale(1.0)}
}
@keyframes loading{
0%,100%{ -webkit-transform: scale(0.0)}
50%{ -webkit-transform: scale(1.0)}
}
</style>
</head>
<div class="loading-demo">
<div class="act1"></div>
<div class="act2"></div>
</div>
<body>
</html>
