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