欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

简单CSS3技巧实现的Logo动画

发布时间:2015-07-23  编辑:杨雨个人博客网站   点击:   

之前不少人提过说要实现像阿里百秀Logo那样的动画效果,为了满足广大用户的需求,这里就简单做个演示。东西相对较简单,所以不要认为你搞不定它。

下面是演示的案例代码,你也可以点击查看动画效果

<style> .imlogo{ display: block; width: 160px; height: 80px; background: #FF5E52 url() 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 href="#"></a>

其实你只需要改变其中的图片地址、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为你的位置即可,不会计算的话直接多试几个就能知道哪个合适了。

本文地址:http://itbyc.com/web/css3/2491.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1