Edward Linus's personal blog, focusing on coding and etc.

使用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>

大功告成

 

About the author

EDLinus

[stay(d) for d in ('determined','diligent','devoted')]

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By EDLinus
Edward Linus's personal blog, focusing on coding and etc.

Meta