本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章通过代码示例,带大家介绍一下css3+javascript实现按钮水波纹效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。css3+js实现按钮水纹涟漪效果
HTML
1 2 | < a href = "#" >button</ a >
< a href = "#" >button</ a >
|
CSS3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | * {
margin : 0 ;
padding : 0 ;
font-family : 'Poppins' , sans-serif ;
}
body {
display : flex;
justify- content : center ;
align-items: center ;
min-height : 100 vh;
flex- direction : column;
background : #1f2a33 ;
}
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( 90 deg, #0162c8 , #55e7fc );
}
a:nth-child( 2 ) {
background : linear-gradient( 90 deg, #755bea , #ff72c0 );
}
span {
position : absolute ;
background : #fff ;
transform: translate( -50% , -50% );
pointer-events: none ;
border-radius: 50% ;
animation: animate 1 s linear infinite;
}
@keyframes animate {
0% {
width : 0px ;
height : 0px ;
opacity: 0.5 ;
}
100% {
width : 500px ;
height : 500px ;
opacity: 0 ;
}
}
|
JavaScript
- 启用 js 监听事件
- 定时器
- 目的:控制动画和单位时间内点击效果统一
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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);
})
})
|
效果图:
阅读剩余部分
相关阅读 >>
javascript函数怎么写
popper.js怎么下载
js如何判断字符串是否为空
es6块级绑定中let and const的详细分析
如何理解javascript中的原型链
javascript怎么删除当前节点
javascript可以编写网页吗
如何使用javascript lastindexof()方法
array中 foreach() 和 map() 的区别
javascript怎么将摄氏度转华氏度
更多相关阅读请进入《CSS3》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 通过代码示例,了解css3+javascript按钮水波纹效果