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

Tony_Zby 发布于2019-08-02 16:16 / 2759人阅读

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

div的层层叠叠

虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才可以做出水波纹的效果呢？答案就是用“叠”的方式，这个水波纹效果的原理其实就是用六个div叠在一起，接着最重要的就是将背景设为固定：background-attachment:fixed；，然后让背景的尺寸有大有小，就可以完成了，只要把六个div叠在一起，搭配CSS的animation，就可以让六个div依序出现。

HTML:

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:

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(
    "" +
    "" +
    "" +
    "" +
    "" +
    "" +
    "" +
    "" +
    "" +
    ""
  );
  setTimeout(function () {
    $(".water" + k).remove();
  }, 3000);
}

要获取效果的完整代码：

私有云混合云水波纹效果 html 波纹效果 html5 波纹效果 css效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55010.html

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

这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才可以做出水波纹的效果呢？答案就是用叠的方式，这个水波纹效果的原理其实就是用六个div叠在一起，接着...

Cciradih 2019-08-30 10:52 评论0 收藏0
css动画-实现一个最简单的水波纹效果button

摘要：类似的效果步骤在页面写出一个并赋予简单的样式代码这是一个按钮默认是无法用给它居中为了增加用户体验为了保持和的位置关系为了遮盖超出的效果添加水波纹的基础样式代码为了保持和的位置关系水波纹圆形水波纹颜色下面与动画效果相关是时候的状态默认类似material-ui的button效果步骤 1. 在页面写出一个button 并赋予简单的样式代码这是一个按钮 ...

Hancock_Xu 2019-08-30 15:56 评论0 收藏0
css 滚动视差之水波纹效果

摘要：我们来看个例子代码很简单，让视口出现滚动条，然后它是这样的很普通的一个滚动效果，然后我们把注释去掉，就是加上这句话华丽变身由于它相对视口固定，看起来就好像只有一个背景一样。核心属性： background-attachment 这个属性就牛逼了，它可以定义背景图片是相对视口固定，还是随着视口滚动，加上这个属性网页瞬间就从屌丝变成高大上。我们来看个例子： ...

_ang 2019-04-23 10:49 评论0 收藏0
css 滚动视差之水波纹效果

摘要：我们来看个例子代码很简单，让视口出现滚动条，然后它是这样的很普通的一个滚动效果，然后我们把注释去掉，就是加上这句话华丽变身由于它相对视口固定，看起来就好像只有一个背景一样。核心属性： background-attachment 这个属性就牛逼了，它可以定义背景图片是相对视口固定，还是随着视口滚动，加上这个属性网页瞬间就从屌丝变成高大上。我们来看个例子： html: I WANT...

番茄西红柿 2019-04-22 19:50 评论0 收藏0
css 滚动视差之水波纹效果

摘要：我们来看个例子代码很简单，让视口出现滚动条，然后它是这样的很普通的一个滚动效果，然后我们把注释去掉，就是加上这句话华丽变身由于它相对视口固定，看起来就好像只有一个背景一样。核心属性： background-attachment 这个属性就牛逼了，它可以定义背景图片是相对视口固定，还是随着视口滚动，加上这个属性网页瞬间就从屌丝变成高大上。我们来看个例子： html: d...

番茄西红柿 2019-04-22 17:02 评论0 收藏0