使⽤CSS实现逼真的⽔波纹点击效果
这篇⽂章特别介绍如何使⽤CSS来完成⽔波纹的效果。
div的层层叠叠
虽然webkit具有遮罩的能⼒（webkit mask），不过webkit虽然强⼤，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该⽤什么⽅法，才可以做出⽔波纹的效果呢？答案就是⽤“叠”的⽅式，这个⽔波纹效果的原理其实就是⽤六个div叠在⼀起，接着最重要的就是将背景设为固定：background-attachment:fixed；，然后让背景的尺⼨有⼤有⼩，就可以完成了，只要把六个div叠在⼀起，搭配CSS的animation，就可以让六个div依序出现。
HTML:
<div class="wave wave5"></div>
<div class="wave wave4"></div>
<div class="wave wave3"></div>
<div class="wave wave2"></div>
<div class="wave wave1"></div>
<div class="wave wave0"></div>复制代码
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:
<div class="wave wave5"></div>
<div class="wave wave4"></div>
<div class="wave wave3"></div>
<div class="wave wave2"></div>
<div class="wave wave1"></div>
<div class="wave wave0"></div>复制代码
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;
}
css鼠标点击样式.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(
'<div class="wave-position water' + k + '" >' +
'<div class="wave-body">' +
'<div class="wave wave5"></div>' +
'<div class="wave wave4"></div>' +
'<div class="wave wave3"></div>' +
'<div class="wave wave2"></div>' +
'<div class="wave wave1"></div>' +
'<div class="wave wave0"></div>' +
'</div>' +
'</div>'
);
setTimeout(function () {
$('.water' + k).remove();
}, 3000);
}复制代码