如何实现一个原质化菜单项或按钮HTML5动画效果

原质化设计（Material Design），也叫材料化设计，是Google提出并应用于触摸屏（移动应用）上的一种交互设计风格。

强调一种能给用户自然反应的高级纸质触感。其中一个实例就是在触摸按钮或菜单时，呈现一个以触摸点为中心位置的涟漪（水波）动画。

要实现这样的动画，主要需要处理2个任务，一个是实现脉冲波效果，还有一个是检测触摸（点击）位置。

1.  实现脉冲波效果

这个使用CSS3的变换很容易实现，本质上是一个带特定底色的元素渐进放大的动画。

在放大的同时，减小透明度，从而制造出放大并淡出的视觉效果。CSS3代码如下：

.ripple {  
    width: 0;  
    height: 0;  
    border-radius: 50%;  
    background: rgba(255, 255, 255, 0.4);  
    transform: scale(0);  
    position: absolute;  
    opacity: 1;  
}  
.rippleEffect {  
    animation: rippleDrop .6s linear;  
}  
@keyframes rippleDrop {  
    100% {  
        transform: scale(2);  
        opacity: 0;  
    }  
} 

2. 获取点击位置

我们需要的位置信息是相对于当前按钮左上角的偏移（即相对坐标），

通过点击事件可以获取鼠标位置，通过元素的offset可以获取元素位置，两者相减就可以得到相对坐标。

这个坐标是水波动画的圆点（中心点）的坐标，那么要得到水波元素的左上坐标，还要再减去其父元素（即按钮）的1/2宽度（或高度）。

我们使用jQuery实现，代码如下：

    $("button").click(function(e) {  
        var posX = $(this).offset().left,  
            posY = $(this).offset().top,  
            buttonWidth = $(this).width(),  
            buttonHeight = $(this).height();  
      
        // 取宽高中的较大者  
        if (buttonWidth >= buttonHeight) {  
            diameter = buttonWidth;  
        } else {  
            diameter = buttonHeight;  
        }  
      
        // 获取水波元素坐标原点  
        var x = e.pageX - posX - diameter / 2;  
        var y = e.pageY - posY - diameter / 2;  
    });  

3. 把水波元素添加为按钮元素的子元素并设置水波动画样式

$(this).prepend("<span class='ripple'></span>");  
  
$(".ripple").css({  
    width: buttonWidth,  
    height: buttonHeight,  
    top: y + 'px',  
    left: x + 'px'  
}).addClass("rippleEffect"); 

这样我们就实现了一个原质化的按钮（菜单项可以参照实现）。