冒泡动画按钮的简单实现（使用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的“减速”作用（当然实际情况可能是浏览器做为此生成了补间动画）。

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

posted @ 2013-09-01 17:41  tt-0411  阅读(2357)  评论(1)  编辑  收藏  举报