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

ArchiveJune 2015

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

使

谷歌近期发布了它的material design spec,在规范中展示了许多非常棒的用户交互效果。其中之一就是Ripple点击特效,当用户点击一个标签的时候,会有类似一滴墨水滴在标签上并且散布开来的效果,效果特别棒。   演示地址: 了解更多:   这个特效可以使用jQuery+CSS3实现,原理大致如下: 在鼠标点击处建立圆圈,这个圆圈是在链接的背后,其父级元素使用overflow:hidden来保持ink元素。圆圈初始状态被缩小到0%,随后被animate到250%的大小来覆盖整个父级元素。当圆圈被animate的时候,圆圈的opacity也开始下降。   使用步骤: 1.将下面的代码复制到主题style.css样式表中 .inkMe{ box-sizing:border-box; overflow:hidden; position: relative...

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

Meta