[css3旋转动画效果]CSS3实现的Logo动画效果例子

时间:2019-11-13  来源:css3教程  阅读:

下面是演示的案例代码,

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

简单CSS3技巧实现的Logo动画

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旋转动画效果]CSS3实现的Logo动画效果例子

http://m.bbyears.com/css/79030.html

推荐访问:css3动画滑动效果
相关阅读 猜你喜欢
本类排行 本类最新