使用Inkdrops给你的网站添加Google Ripple效果


谷歌近期发布了它的material design spec,在规范中展示了许多非常棒的用户交互效果。其中之一就是Ripple点击特效,当用户点击一个标签的时候,会有类似一滴墨水滴在标签上并且散布开来的效果,效果特别棒。

 

演示地址:

http://www.jqueryscript.net/demo/Ink-Ripple-Style-User-Interaction-Using-jQuery-CSS3-Ink-Drops/

了解更多:

http://www.google.com/design/

 

这个特效可以使用jQuery+CSS3实现,原理大致如下:

在鼠标点击处建立圆圈,这个圆圈是在链接的背后,其父级元素使用overflow:hidden来保持ink元素。圆圈初始状态被缩小到0%,随后被animate到250%的大小来覆盖整个父级元素。当圆圈被animate的时候,圆圈的opacity也开始下降。

 

使用步骤:

1.将下面的代码复制到主题style.css样式表中

 

2.将下面代码加入主题JS文件中

3.给需要添加Ripple效果的标签上添加class='inkMe',比如<a class='inkMe'>Regular Link</a>

大功告成

 

声明:Edward Linus|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 使用Inkdrops给你的网站添加Google Ripple效果


[stay(s) for s in ['humble','diligent']]