css-涟漪效果按钮特效
程序员文章站
2022-06-09 16:22:14
...
最终效果：
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。
喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力。