Material Ripple

需要注意的是，如果不使用Javascript，将没法获取到准确的鼠标位置，只能让Ripple从中间散开。

这边的思路是利用伪元素+CSS Clipping的实现，用::before元素加上一般的主元素的宽高进行定位，然后在元素的基础上浮层。

注意的是显示的Animation中，100%处应该试Display恢复为None，避免干扰正常交互。

另外一个思路是父元素overflow为hidden，ripple元素作为父元素的最后子元素，使用JS控制position和元素层级。这种实现比较方便，而且兼容性比伪元素好一些。

给出一个CSS的思路，非常清奇：

原理是Hover的时候让背景变为一个中间为空心、旁边为稍淡颜色的的背景。

这里注意的是用了圆心渐变的形式，让中心变得很大，算是radial-gradient的妙用。


/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; /* what the fuck */
}
.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s; /* 0s transition??????? */
}
/* Button style */
button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: #2196f3;
  box-shadow: 0 0 4px #999;
  outline: none;
}

# Material Ripple

Material Ripple