最终效果：

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>涟漪效果按钮</title><link rel="stylesheet" href="../../reast.css"><link rel="stylesheet" href="./style.css">
</head><body><a href="#">Button</a><a href="#">Button</a><script type="text/javascript">const buttons = document.querySelectorAll("a");buttons.forEach(btn=>{btn.addEventListener("click",function(e){let x = e.clientX - e.target.offsetLeft;let y = e.clientY - e.target.offsetTop;let ripples = document.createElement("span");ripples.style.left = x + 'px';ripples.style.top = y + 'px';this.appendChild(ripples);setTimeout(() => {ripples.remove();}, 1000);})})</script>
</body></html>

因为是点击触发效果，必须加一点js了。点击a标签后通过坐标定位涟漪应该在上面位置出现，然后添加进去。因为是监听a标签本身，所以this就是点击的a标签了。

reast.css

/*样式重置*/
body,ul,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,table,fieldset,legend{margin:0; padding:0;}
ul,li,ol{list-style:none;}
img,fieldset{border:0; }
img{display:block;}
a{text-decoration:none; color:#333;}
h1,h2,h3,h4,h5,h6{font-weight:100;}
body{ font-family:"微软雅黑";}
input,a{outline:none;}@import url("https://fonts.googleapis.com/css?family=PingFang SC:100,200,300,400,500,600,700");

reast.css 是我用的重置样式。

style.css

* {font-family: 'Poppins', sans-serif;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;flex-direction: column;background: #040d15;
}a {position: relative;display: inline-block;padding: 12px 36px;margin: 10px 0;color: #fff;text-decoration: none;text-transform: uppercase;font-size: 18px;letter-spacing: 2px;border-radius: 40px;background: linear-gradient(90deg, #0162c8, #55e7fc);overflow: hidden;
}a:nth-child(2) {background: linear-gradient(90deg, #755bea, #ff72c0);
}span {position: absolute;transform: translate(-50%, -50%);pointer-events: none;border-radius: 50%;animation: animate 1s linear infinite;background: #fff;
}@keyframes animate {0% {width: 0px;height: 0px;opacity: .5;}100% {width: 500px;height: 500px;opacity: 0;}
}

这里主要是给 js 动态加入的 span 一个圆形的样式，并添加涟漪css动画效果，动画时长 1s。消失后执行 js 的计时器删除该 span。

喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力。

css-涟漪效果按钮特效相关推荐

html+css+js涟漪效果按钮点击泛起涟漪
效果如果代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
html涟漪动画效果,CSS 在按钮上做个涟漪效果（Ripple Animation）
作为一个 CSS 渣,这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试. 效果大概长这样: 首先先观察了一番,大概得到以下特征: 以鼠标按下的位置为原点,以某个值为半径进行扩散 ...
html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
【CSS按钮特效】css如何实现科技感好看按钮效果（尾附源码下载）
[写在前面]这两天还是比较痴迷于CSS特效的,甚至还想着去用CSS做动画片呢,希望后面能做到,今天主要讲的是我们页面常见的元素-按钮,很多时候按钮也需要高级化,但是很多人苦于没有途径去寻找,于是乎借这 ...
CSS 3.0实现酷炫的按钮特效
给大家分享一个用CSS 3.0实现酷炫按钮特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...

css-涟漪效果按钮特效

html

reast.css

style.css

css-涟漪效果按钮特效相关推荐

最新文章

热门文章