如何实现一个原质化菜单项或按钮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"); 

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