7C00.ME/houmu 2013-09-01

冒泡动画按钮的简单实现(使用css3)

原始的参考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ,基本原理是利用了 hover,background-position 和 transition 三个属性。

原文给出的实现细致完整,但是对于理解关键的实现原理不便,我按照原文的思路给出一种简单实现,效果可以可见 http://jsbin.com/UbIJUfA/1/

代码如下(这段代码只能在Chromium类浏览器工作):

<!DOCTYPE html>
<html>
<style>
.btn {
    padding: 10px 20px;
    background-color: rgb(0, 162, 255);
    background-image: url("http://demo.tutorialzine.com/2010/10/css3-animated-bubble-buttons/buttons/button_bg.png");
    background-position:bottom left;
    -webkit-transition: background-position 1s;
}

.btn:hover{
    background-position:top left;
}
</style>

<p><a href="javascript:;" class="btn">Here!</a></p>
</html>

实现原理简单说来:

首先是使用hover伪类和background-position,使得按钮在鼠标滑入和滑出时按钮背景产生“变化”,然后是用transition属性把这个变化“放慢”从而产生“动画”。hover常被用来产生对鼠标滑过的感应动画效果。在本例中,background-image是一张尺寸比较大的带气泡图案的图片,hover的作用是设定background-position属性,让鼠标滑入时背景图片的显示区域从底部(bottom)移动到顶部(top),滑出时相反。由于hover对属性的修改是瞬间完成的,所以需要配合transition的“减速”作用(当然实际情况可能是浏览器做为此生成了补间动画)。

在原文中,作者还设置了其他属性使得按钮更美观和具有普适性,还有些代码是为了兼容多种浏览器,因此其余部分代码也是值得学习研究一番的。