摘要:后期准备使用面向对象的写法完成,将水波的大小颜色范围过渡等效果进行开发者自定义,或许会加入更多的效果
css之水波效果
没事实现了一个小效果,贴上来分享分享
先看看效果
上代码
:root{ background: #ffffd; } body{ position: relative; } ripper{ width: 50px; height: 50px; background: rgba(0,0,0,.1); border-radius: 50%; position: absolute; animation: move .3s; } @keyframes move{ 0%{ transform: scale(0); } 49%{ transform: scale(1); } 51%{ transform: scale(1); } 100%{ transform: scale(0); } }
window.addEventListener("click",function(e){ if(closeTimer){ clearTimeout(closeTimer); } var e = event||e; var x = e.clientX,y = e.clientY; var Top = y-25-8,Left = x-25-8; var ripper = document.createElement("ripper"); ripper.style.top = Top+"px"; ripper.style.left = Left+"px"; document.getElementsByTagName("body")[0].appendChild(ripper); var closeTimer = setTimeout(function(){ document.getElementsByTagName("body")[0].removeChild(ripper); },250) })
备注:木有html
踩坑点
var closeTimer必须在点击事件内部生成,在作用域外面会造成定时器关闭混乱,清除不成功的问题
记忆混淆的BOM对象:网页可见区域: document.body.clientWidth/clientHeight
谈谈
这个只是简单的想法,基础版本,样式和逻辑分离,只是简单实现了效果。
后期准备使用面向对象的写法完成,将水波的大小、颜色、范围、过渡等效果进行开发者自定义,或许会加入更多的效果:)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113182.html
这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠 虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往往会造成困扰(这也是为什么chrome要这么吃资源了),因此撇开webkit不谈,我们该用什么方法,才可以做出水波纹的效果呢?答案就是用叠的方式,这个水波纹效果的原理其实就是用六个div叠在一起,接着...
这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠 虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往往会造成困扰(这也是为什么chrome要这么吃资源了),因此撇开webkit不谈,我们该用什么方法,才可以做出水波纹的效果呢?答案就是用叠的方式,这个水波纹效果的原理其实就是用六个div叠在一起,接着...
摘要:先上效果图水波动画边框动画水波动画实现代码水波动画边框动画实现代码边框动画先上效果图: 水波动画: 边框动画: 1.水波动画 实现代码 1 DOCTYPE html> 2 3 4 5 水波动画 6 7 .water{ 8 width: 50px; 9 h...
摘要:大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的,而遮罩层是不显示的。利用能做出一些不错的效果,比如。想到用这个属性正合适,于是要来了心型图片,拿到设计师导出的文件,用压缩下得到一个。 遮罩层,如果学过Flash的同学应该都听过,跟PS的剪切蒙版差不多。大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的,而遮罩层是不显示的。类似于现实世界中一张A4卡纸剪了个洞,我...
阅读 2864·2021-11-24 09:39
阅读 3477·2021-11-22 13:54
阅读 3364·2021-11-16 11:45
阅读 2374·2021-09-09 09:33
阅读 3128·2019-08-30 15:55
阅读 1228·2019-08-29 15:40
阅读 884·2019-08-29 15:19
阅读 3335·2019-08-29 15:14