使用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;
}
.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);
}

要獲取效果的完整代碼：