应用CSS完成真实的水波纹点一下实际效果

2021-01-20 17:55 jianzhan

这篇文章内容非常详细介绍怎样应用CSS来进行水波纹的实际效果。

div的重重叠叠

尽管webkit具备遮罩的工作能力(webkit mask),但是webkit尽管强劲,但在跨访问器上一直它的罩门,更何况在特性上也是常常会导致困扰(这也是为何chrome要这么吃資源了),因而撇开webkit不谈,大家该用甚么方式,才能够做出水波纹的实际效果呢?回答便是用“叠”的方法,这个水波纹实际效果的基本原理实际上便是用6个div叠在1起,接着最关键的便是将情况设为固定不动:background-attachment:fixed;,随后让情况的规格有大有小,便可以进行了,要是把6个div叠在1起,配搭CSS的animation,便可以让6个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;
  }
}

制做水波

上面有几个地区要略微留意1下,第1个是由于部位都应用了肯定部位(absolute),因而大家要将全部的div精准定位在圆心1定有难度,这时候候就务必应用CSS3的功能强大专用工具:calc,calc能够全自动测算部位,借由这个方法,大家立即可让CSS替大家测算出圆心,非常的便捷。(留意!calc的+、-号前后左右务必有时间格,要不然会错误),随后便是每一个animation要逐1再加延迟时间時间,便可以逐1地冒出来,假如大家再把半径设大1点,就会变为圆形或是椭圆型!

掌握了水波纹的基本原理以后,再来大家要是把上面的色调换为情况图,便可以圆满的造成水波纹了。

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;),随后统1将情况垂直居中,这般1来,情况的部位同样,但情况的尺寸不一样,就会让蒙骗双眼,让双眼觉得看到了水波,但是里头也用了1个小窍门让水波看起来更真实,便是让每个情况尺寸都不一样,换句话说便是让水波的震幅愈来愈小,让情况尺寸从106 > 102 > 104 > 101 > 102 > 100,这般1来就会让水波更真实!

以上便是单纯性运用CSS制做水波纹的基本原理,自然最终便是要写1段JS让水波能够在电脑鼠标点一下的霎时造成,并且下1个水波务必遮盖上1个水波,随后水波造成后会全自动消退,防止过量的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);
}

 

总结

以上所述是网编给大伙儿详细介绍的应用CSS完成真实的水波纹点一下实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!