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

本文专门介绍了如何使用CSS来完成水波纹效果。

div的级联

尽管webkit具有屏蔽功能（webkit mask），尽管webkit功能强大，但它始终是跨浏览器的掩护，并且经常导致性能问题（这就是chrome应该吃掉资源的原因），因此从webkit，我们应该使用什么方法来产生水波纹效果？答案是使用“堆栈”方法。这种水波纹效应的原理实际上是将六个div堆叠在一起，然后最重要的是将背景设置为固定：background-attachment：fixed;然后增大背景的大小。如果较小，则可以完成。只要将六个div堆叠在一起并与CSS结合，六个div就会依次出现。

HTML：

class="wave wave5">div>
class="wave wave4">div>
class="wave wave3">div>
class="wave wave2">div>
class="wave wave1">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中的+和-前后必须有空格，否则会出错），然后必须为每个逐一添加延迟时间，然后才能逐一显示。如果我们将半径设置得更大一些，它将变成圆形或椭圆形！

了解水波纹原理后，只需将上面的颜色更改为背景图像，就可以平滑地生成水波纹。

HTML：

class="wave wave5">div>
class="wave wave4">div>
class="wave wave3">div>
class="wave wave2">div>
class="wave wave1">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(
    
" style="z-index: + k + ;top: + (j - 150) + px;left: + (i - 150) + px;"> +
    
 +
    
 +
    
 +
    
 +
    
 +
    
 +
    
 +
     +
    
  );
  setTimeout(function () {
    $(.water + k).remove();
  }, 3000);
}复制代码

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-341264-1.html