前の时間(长いかもしれませんが)、网易クライアントはニュースを见て、指がニュースを押すたびに水の波紋の効果があることを発见して、とても不思议だと思って、その时この効果がどのようにしたのか知りたいと思っていました;今日は仕事が空いていて、探してみて、実戦に成功しました.
コードは次のとおりです.
html:

  
  
  
  


  

    
Android L Ripple Effect
    

      BUTTON
      BUTTON
      BUTTON
      BUTTON
    
  

  

 js: 

  $('body').on('click',function(e){
    var offset = $(this).offset();
    var target = e.target;
    if (target.tagName.toLowerCase() !== 'button') return false; // button    
    var rect = target.getBoundingClientRect();
    var x = e.pageX;
    var y = e.pageY;
    var ripple = $('<span class="ripple"></span>');
    ripple.css('width',Math.max(rect.width,rect.height));
    ripple.css('height',Math.max(rect.width,rect.height));
    ripple.appendTo(target).css({
      left: (x  - offset.left - rect.left - ripple.width()/2) + 'px',
      top : (y - offset.left - rect.top - ripple.height()/2) + 'px'      
    });
  })
  

 css: 
body {
  margin: 0;
  padding: 0;
}
#wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
h1 {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  flex: 2;
}
#main {
  flex: 5;
}
button {
  position: relative;
  display: block;
  width: 13em;
  height: 3em;
  margin: 2em;
  border: none;
  outline: none;
  letter-spacing: .2em;
  font-weight: bold;
  background: #dfdfdf;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  border-radius: 2px;
}
button:nth-child(2) {
  color: #fff;
  background: #4285f4;
}
button:nth-child(3) {
  color: #fff;
  background: #00bad2;
}
button:nth-child(4) {
  color: #fff;
  background: #ff8a80;
}
.ripple {
  position: absolute;
  background: rgba(0,0,0,.15);
  border-radius: 100%;
  transform: scale(0);
  pointer-events: none;
  animation: ripple .75s ease-out;
}
.ripple.show {
  animation: ripple .75s ease-out;
}
@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}
  
    :http://www.tuicool.com/articles/jieuYn