前言
在上一篇文章中，带着大家实现了一个通过CSS动画实现的简易波纹效果，感兴趣的朋友可以在我主页里去看看。这次，继上个波纹效果之后，这回给大家带来一个按钮上的波纹效果，简单来说就是通过点击按钮，在按钮上会产生如同水波一样的波纹。话不多说，大家直接看到下面的效果预览。
效果预览
以上就是最终的实现效果了，咱们接下来便一步一步来实现它。
HTML && JS
众所周知，因为有交互，因此JS是必不可少的，所以我们首先看到HTML和JS部分，这里是实现整个交互效果的基础。相关代码如下。
<a href="#" class="btn">123</a>
<a href="#" class="btn">456</a>
<script>
let btn = document.querySelectorAll('.btn')
btn.forEach(btn=>{
btn.onclick = function(e){
console.log(e);
let x = e.pageX - e.target.offsetLeft
let y = e.pageY - e.target.offsetTop
let color = '#' + Math.floor(Math.random()*0xFFFFFF).toString(16)
let ripples = document.createElement('span')
ripples.style.left = x+'px'
ripples.style.top = y+'px'
ripples.style.borderColor = color
this.appendChild(ripples)
setTimeout(()=>{
ripples.remove()
},2000)
}
})
</script>
对于HTML部分。它包含两个带有 class 类名为 btn 的链接元素，分别显示文本为 123 和 456。这些内容都是可以自定义的。
然后看到JS部分。首先获取所有拥有 btn 类的元素，并对每个按钮应用以下操作：
- 当按钮被点击时，创建一个
span元素来模拟水波纹效果。 - 计算鼠标点击位置相对于按钮的偏移量，以便将水波纹特效定位在正确的位置。
- 随机生成一个颜色值，用于设置水波纹的边框颜色。
- 设置水波纹元素的位置、边框颜色，并将其添加到被点击的按钮内。
- 使用
setTimeout定时器，在2秒后，删除水波纹效果，这样做是为可以持续地在页面上显示。
上述我们实现了按钮点击时产生动态水波纹效果的功能。点击按钮时会在点击位置产生一个具有随机颜色的水波纹效果，随后水波纹效果消失。这种效果可以增强用户交互体验，使按钮点击更加炫酷。
CSS
有了交互的逻辑，然后就要给整个效果添砖加瓦了。相关代码如下。
.btn{
position: relative;
padding: 12px 40px;
font-size: 1.05em;
border-radius: 40px;
background: #2f2f2f;
color: #bbb;
text-decoration: none;
text-transform: uppercase;
user-select: none;
transition: 0.5s;
overflow: hidden;
}
.btn:hover{
color: #fff;
}
首先我们看到.btn 类的样式，也就是按钮的样式。设置按钮的基本样式属性：相对定位、内边距、字体大小、圆角边框、背景颜色、文字颜色、文本装饰等。使用user-select: none来防止用户选择文本。通过transition: 0.5s将按钮样式变化过渡时间为0.5秒，并且将溢出内容隐藏。最后就是当鼠标悬停在按钮上时，改变文字颜色为白色，实现按钮颜色反转效果。
.btn span{
position: absolute;
border: 2px solid #fff;
transform: translate(-50%,-50%);
pointer-events: none;
border-radius: 50%;
animation: animate 2s linear infinite;
filter: brightness(2);
}
@keyframes animate {
0%{
width: 0;
height: 0;
}
100%{
width: 350px;
height: 350px;
}
}
然后就是.btn span类的样式。对元素使用绝对定位，创建轮廓效果的白色半透明圆形元素。使用transform: translate(-50%,-50%)将元素向左上角偏移 50% 以使元素的中心与按钮的中心对齐。添加 border-radius: 50%; 使元素呈现圆形。使用 brightness(2) 滤镜来增加元素的亮度。最后应用一个自定义的 animate 动画，在2秒内从圆点扩展到350px宽高。
最后是@keyframes animate关键帧动画了。我们定义了一个名为 animate 的动画效果，使圆形元素从初始大小0扩展到宽高为350px的圆形，持续时间为2秒，线性无限循环。
这样的设计为按钮添加了动态的水波纹效果，提升了页面交互体验。
至此，整个效果就实现了，通过以上CSS代码实现了一个页面布局，包含了具有水波纹点击效果的按钮样式。
总结
以上就是整个效果的实现过程了，代码简单易懂，另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
