技术研究-QQ2009版按钮渐显渐隐的由来

来源:互联网 发布:微信小程序demo源码 编辑:程序博客网 时间:2024/05/20 18:44

QQ2009改版后界面涣然一新,其最吸引人之处是各个按钮均做了平滑过渡,用户体验更加友好.
QQ按钮正常状态:

QQ按钮鼠标经过后:


由于背景的渐显渐隐,给用户一种舒适感。
这种技术最早见于OFFICE2007,例如07版OFFICE的工具面板,其背景也有这种效果
经过前

经过后


个人觉得按钮一般是采用样式控制,例如
HTML:
<button>取消</button>
CSS:
button {height:20px;background:url(a.gif) no-repeat;}
那么我们在切换按钮背景图时一般是改变obj.style.background.url来实现,那么如果能让这个切换后的图片在一定时间内缓缓显示和缓缓隐藏,这是难点。
有没有其他方式可以实现呢,我曾制作过一个GIF动画按钮,用了5帧来表现这个过程,但过渡仍不是那么平滑,我当然可以多做几帧,但不如用代码控制那么过渡自然。
我在这里抛砖引玉,希望各位高手能尝试下将这种技术引入到我们的设计当中,以改进用户体验。

原创粉丝点击