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

栏目: CSS · 发布时间: 5年前

内容简介:这篇文章特别介绍如何使用CSS来完成水波纹的效果。虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往往会造成困扰(这也是为什么chrome要这么吃资源了),因此撇开webkit不谈,我们该用什么方法,才可以做出水波纹的效果呢?答案就是用“叠”的方式,这个水波纹效果的原理其实就是用六个div叠在一起,接着最重要的就是将背景设为固定:background-attachment:fixed;,然后让背景的尺寸有大有小,就可以完成了,只

这篇文章特别介绍如何使用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;
  }
}

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

制作水波

上面有几个地方要稍微注意一下,第一个是因为位置都使用了绝对位置(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;
  }
}

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

逼真的水波

比较需要注意的地方,就是背景的位置千万要设为固定(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);
}

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

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


以上所述就是小编给大家介绍的《使用CSS实现逼真的水波纹点击效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

软件测试

软件测试

乔根森 / 韩柯 / 机械工业出版社 / 2003-12-1 / 35.00元

《软件测试》(原书第2版)全面地介绍了软件测试的基础知识和方法。通过问题、图表和案例研究,对软件测试数学问题和技术进行了深入的研究,并在例子中以更加通用的伪代码取代了过时的Pascal代码,从而使内容独立于具体的程序设计语言。《软件测试》(原书第2版)还介绍了面向对象测试的内容,并完善了GUI测试内容。一起来看看 《软件测试》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具