1

首先，这是链接（单击任何图块）：http ://www.google.com/design/#resources

我已经浏览了代码

 <svg width="100%" height="100%" overflow="hidden">
  <defs></defs>
    <g>
      <ellipse cx="27.5" cy="189.46875" rx="20" ry="20" stroke="none" fill="white" class="ripple" fill-opacity="0.5" style="-webkit-transform: scale(1); opacity: 0;">
       </ellipse>
    </g>
 </svg>

单击时，在单击时会生成上面的椭圆。

任何人都可以帮助如何在点击时创建它吗？

4

3 回答 3

2

使用event.pageX和event.pageY在事件处理程序中查找鼠标坐标。使用这些值来定位圆。

jsfiddle.net/pu8jX

于 2014-06-30T21:49:18.637 回答
2

这是我找到的最好的例子，我希望他们能服务！

http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

其他令人惊叹的 Lib 是 Waves：受 Google 的 Material Design 启发的点击效果

http://publicis-indonesia.github.io/Waves/

于 2014-08-20T13:39:56.470 回答
1

我为此创建了一个插件，它可以在 github 上供您获取https://github.com/ninox92/Google-material-design-ripple-effect/

预览：http ://thomasreynders.com/google-material-design-plugin/

于 2014-07-16T20:48:35.610 回答