使用CSS3和Javascript单击时的按钮涟漪效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
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;
overflow: hidden;
background: linear-gradient(90deg,#0162c8,#55e7fc);
}
a:nth-child(2){
background: linear-gradient(90deg,#755bea,#ff72c0);
}
span{
position: absolute;
background: #fff;
transform: translate(-50%, -50%);
pointer-events: none;
border-radius: 50%;
animation: animate 1s linear infinite;
}
@keyframes animate{
0%{
width: 0px;
height: 0px;
opacity: 0.5;
}
100%
{
width: 500px;
height: 500px;
opacity: 0;
}
}
</style>
</head>
<body>
<a href="#">Button</a>
<a href="#">Button</a>
</body>
<script>
const button = document.querySelectorAll('a');
button.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>
</html>
代码来源于视频：https://www.youtube.com/watch?v=ueyRcYEmsrI&feature=youtu.be
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
