谷歌近期发布了它的material design spec，在规范中展示了许多非常棒的用户交互效果。其中之一就是Ripple点击特效，当用户点击一个标签的时候，会有类似一滴墨水滴在标签上并且散布开来的效果，效果特别棒。
演示地址:
http://www.jqueryscript.net/demo/Ink-Ripple-Style-User-Interaction-Using-jQuery-CSS3-Ink-Drops/
了解更多:
这个特效可以使用jQuery+CSS3实现，原理大致如下：
在鼠标点击处建立圆圈，这个圆圈是在链接的背后，其父级元素使用overflow:hidden来保持ink元素。圆圈初始状态被缩小到0%，随后被animate到250%的大小来覆盖整个父级元素。当圆圈被animate的时候，圆圈的opacity也开始下降。
使用步骤：
1.将下面的代码复制到主题style.css样式表中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | .inkMe{ box-sizing:border-box; overflow:hidden; position: relative !important; } .ink{ position: absolute; display: block; border-radius: 100%; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .inkDefaultColor{ background-color: rgba(68, 204, 170, 0.45); } .ink.animate{ -webkit-animation:boom 800ms ease-out; animation:boom 800ms ease-out; } @-webkit-keyframes boom{ 0%{ transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); } 100%{ transform: scale(2.5); -webkit-transform: scale(2.5); -moz-transform: scale(2.5); opacity: 0; } } @keyframes boom{ 0%{ transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); } 100%{ transform: scale(2.5); -webkit-transform: scale(2.5); -moz-transform: scale(2.5); opacity: 0; } } |
2.将下面代码加入主题JS文件中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | $('.inkMe').click(function(evt){ var elem = $(this); var multiple = false; (this.getAttribute("multiple-ink")== 'true')?multiple = true:true; if(!multiple) { if(elem.find(".ink").length == 0) elem.prepend("<span class='ink'></span>"); } else elem.prepend("<span class='ink'></span>"); var display = elem.css("display"); (display=='inline'||display=='inline-block')?elem.css({display:'inline-block'}):elem.css({display:'block'}); var inkColor = this.getAttribute("ink-color"); var ink = elem.find('.ink'); inkColor!=""?ink.css({'background-color':inkColor}):true; (!multiple)?ink.removeClass('animate'):true; if(!ink.width()&&!ink.height()) { var max = Math.max(elem.outerWidth(),elem.outerHeight()); ink.css({width:max+'px',height:max+'px'}); } var x = evt.pageX - elem.offset().left - ink.width()/2; var y = evt.pageY - elem.offset().top - ink.height()/2; ink.css({top:y+'px',left:x+'px'}); setTimeout( function(){ink.addClass('animate');},1); }); }); |
3.给需要添加Ripple效果的标签上添加class=‘inkMe‘，比如<a class=’inkMe’>Regular Link</a>
大功告成
