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

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