这篇文章特别介绍如何使用CSS来完成水波纹的效果。
div的层层叠叠
虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往往会造成困扰(这也是为什么chrome要这么吃资源了),因此撇开webkit不谈,我们该用什么方法,才可以做出水波纹的效果呢?答案就是用“叠”的方式,这个水波纹效果的原理其实就是用六个div叠在一起,接着最重要的就是将背景设为固定:background-attachment:fixed;,然后让背景的尺寸有大有小,就可以完成了,只要把六个div叠在一起,搭配CSS的animation,就可以让六个div依序出现。
HTML:
<divclass="wavewave4">div> <divclass="wavewave3">div> <divclass="wavewave2">div> <divclass="wavewave1">div> <divclass="wavewave0">div><divclass="wavewave5">div>
CSS:
position:absolute; top:calc((100%-30px)/2); left:calc((100%-30px)/2); width:30px; height:30px; border-radius:300px; } .wave0{ background:#f00; z-index:2; background-size:auto106%; animation:w1sforwards; } .wave1{ background:#d00; z-index:3; animation:w1s.2sforwards; } .wave2{ background:#b00; z-index:4; animation:w1s.4sforwards; } .wave3{ background:#900; z-index:5; animation:w1s.5sforwards; } .wave4{ background:#700; z-index:6; animation:w1s.8sforwards; } .wave5{ background:#500; z-index:7; animation:w1s1sforwards; } @keyframesw{ 0%{ top:calc((100%-30px)/2); left:calc((100%-30px)/2); width:30px; height:30px; } 100%{ top:calc((100%-300px)/2); left:calc((100%-300px)/2); width:300px; height:300px; } }.wave{
制作水波
上面有几个地方要稍微注意一下,第一个是因为位置都使用了绝对位置(absolute),因此我们要将所有的div定位在圆心一定有难度,这时候就必须使用CSS3的好用工具:calc,calc可以自动计算位置,借由这个方式,我们直接可以让CSS替我们计算出圆心,相当的方便。(注意!calc的+、-号前后必须有空格,不然会出错),然后就是每个animation要逐一加上延迟时间,就可以逐一地冒出来,如果我们再把半径设大一点,就会变成圆形或是椭圆形!
了解了水波纹的原理之后,再来我们只要把上面的颜色换成背景图,就可以顺利的产生水波纹了。
HTML:
<divclass="wavewave4">div> <divclass="wavewave3">div> <divclass="wavewave2">div> <divclass="wavewave1">div> <divclass="wavewave0">div><divclass="wavewave5">div>
CSS:
position:absolute; top:calc((100%-30px)/2); left:calc((100%-30px)/2); width:30px; height:30px; border-radius:300px; background:url(图片路径); background-attachment:fixed; background-position:centercenter; } .wave0{ z-index:2; background-size:auto106%; animation:w1sforwards; } .wave1{ z-index:3; background-size:auto102%; animation:w1s.2sforwards; } .wave2{ z-index:4; background-size:auto104%; animation:w1s.4sforwards; } .wave3{ z-index:5; background-size:auto101%; animation:w1s.5sforwards; } .wave4{ z-index:6; background-size:auto102%; animation:w1s.8sforwards; } .wave5{ z-index:7; background-size:auto100%; animation:w1s1sforwards; } @keyframesw{ 0%{ top:calc((100%-30px)/2); left:calc((100%-30px)/2); width:30px; height:30px; } 100%{ top:calc((100%-300px)/2); left:calc((100%-300px)/2); width:300px; height:300px; } }.wave{
逼真的水波
比较需要注意的地方,就是背景的位置千万要设为固定(background-attachment:fixed;),然后统一将背景居中,如此一来,背景的位置相同,但背景的大小不同,就会让欺骗眼睛,让眼睛认为看到了水波,不过里头也用了一个小技巧让水波看起来更逼真,就是让每一个背景大小都不同,换句话说就是让水波的震幅越来越小,让背景大小从106 > 102 > 104 > 101 > 102 > 100,如此一来就会让水波更逼真!
以上就是单纯利用CSS制作水波纹的原理,当然最后就是要写一段JS让水波可以在鼠标点击的刹那产生,而且下一个水波必须覆盖上一个水波,然后水波产生后会自动消失,避免过多的div造成画面延迟。
jQuery:
varz=2; $(document).on('click',function(e){ mx=e.pageX; my=e.pageY; z=z+1; _wave(mx,my,z); }); function_wave(i,j,k){ $('.ui-content').prepend( 'varmx,my,timer;
); setTimeout(function(){ $('.water'+k).remove(); },3000); }+k+'"style="z-index:'+k+';top:'+(j-150)+'px;left:'+(i-150)+'px;">'+'
'+'+'+'+'+'+'+'
'+'
'
原文作者:果冻