css之简易水波效果

Miracle 发布于2019-08-29 15:14 / 3394人阅读

摘要：后期准备使用面向对象的写法完成，将水波的大小颜色范围过渡等效果进行开发者自定义，或许会加入更多的效果

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

谈谈
这个只是简单的想法，基础版本，样式和逻辑分离，只是简单实现了效果。
后期准备使用面向对象的写法完成，将水波的大小、颜色、范围、过渡等效果进行开发者自定义，或许会加入更多的效果:)

云服务器 GPU云服务器 js水波背景效果 css效果效果显示 css jquery 气球css js效果

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

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

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

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

Tony_Zby 2019-08-02 16:16 评论0 收藏0
使用CSS实现逼真的水波纹点击效果

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

Cciradih 2019-08-30 10:52 评论0 收藏0
css动画Demo---水波动画和边框动画

摘要：先上效果图水波动画边框动画水波动画实现代码水波动画边框动画实现代码边框动画先上效果图：　　水波动画：　　　　边框动画： 1.水波动画　　实现代码　　 1 DOCTYPE html> 2 3 4 5 水波动画 6 7 .water{ 8 width: 50px; 9 h...

dongfangyiyu 2019-04-23 13:39 评论0 收藏0
mask-image的应用

摘要：大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。利用能做出一些不错的效果，比如。想到用这个属性正合适，于是要来了心型图片，拿到设计师导出的文件，用压缩下得到一个。遮罩层，如果学过Flash的同学应该都听过，跟PS的剪切蒙版差不多。大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。类似于现实世界中一张A4卡纸剪了个洞，我...

HollisChuang 2019-08-30 11:19 评论0 收藏0