使用CSS实现逼真的水波纹点击效果

jiezi

6 年前

这篇文章特别介绍如何使用 CSS 来完成水波纹的效果。

虽然 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;
}
.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 +'" style="z-index:' + k + ';top:' + (j - 150) + 'px;left:' + (i - 150) + 'px;">'+'<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);
}

div 的层层叠叠

制作水波

逼真的水波