首页
文章
设计
配色
色彩
文章
文章
设计
简单CSS3技巧实现的Logo动画(转)
来源：
大前端
时间：2015-04-24 12:57:43
浏览：3892 次
本站文章，除标明（转）的文章外，其他的都是本站原创，转载请标明出处，谢谢。
之前不少人提过说要实现像阿里百秀Logo那样的动画效果，为了满足广大用户的需求，这里就简单做个演示。东西相对较简单，所以不要认为你搞不定它。 下面是演示的案例代码<blockquote> <style> .imlogo{ display: block; width: 160px; height: 80px; background: #FF5E52 url(http://www.daqianduan.com/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> [](#) </blockquote> 其实你只需要改变其中的图片地址、Logo区域大小（160px和80px）背景图的坐标（22px和-48px），你就能实现自己的动画了，如果你很懒，那就做个119*100px的logo即可，像下面这样的一张图（背景做成透明的，png格式，即可实现代码改变颜色）。
上一篇：
[转译]5种方法提高你网站的登录体验
下一篇：
web页面标签重置cssReset(新增HTML5标签)
赞
0
踩
0
