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