Google Material Design

关于Google的Material Design,请访问https://design.google.com/。
上面的网站很有可能打不开的，所以我特意截了一张动态图：

Google Material Desian

当点击一个按钮或者一个链接的时候，就会泛起涟漪，这个是本人完成的效果：

See the Pen Google Ripple Button by blwoosky (@blwoosky) on CodePen.

实现

其实主要是用CSS3将一个水波（圆）做出来就可以了：

@keyframes ripple
{
  from {
    transform:scale(0);
    opacity:0.5; 
  }
  to {
    transform:scale(100);
    opacity:0;
  }
}

上面是定义了一个圆从小变到大的动画，同时它的透明度从0.5变成了0。
如果给一个写好的圆加上这个动画，则是这样的效果：

See the Pen yOYNRm by blwoosky (@blwoosky) on CodePen.

有了这个效果后，我们只需要把它添加到一个点击的元素里即可：

//元素CSS3动画结束后的回调函数
function aniEnd(obj, fn) {
    $(obj).on("animationend", fn);
}

someBtn.on("mousedown", function(e) {

    var me = $(this);

    var x = e.pageX,
        y = e.pageY;

    //计算出在当前元素上点击的位置
    x = x - me.offset().left;
    y = y - me.offset().top;


    //创建一个水波，插入到点击元素 someBtn 里面
    var ripple = $("<span class='ripple'></span>");

    //将当前按钮设置相对定位（视情况而定）
    me.css({
        position: "relative";
    });
    //设置水波为绝对定位，相对于当前点击的元素进行定位
    ripple.css({
        position: "absolute",
        left: x - 2,
        top: y - 2
    });
    me.append(ripple);

    //当CSS3动画结束后，删除这个水波
    aniEnd(ripple, function() {
        ripple.remove();
    });

});

如果上面的代码有疑问，这里还有视频教程哦：http://digcss.com/videos/14-google-wave-button/