【www.bbyears.com--css3教程】
下面是演示的案例代码,
其实你只需要改变其中的图片地址、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动画实例
动画笔记
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)}
}