js点击按钮实现水波纹效果代码(点击按钮实现水波纹效果代码(CSS3和和Canves))
主要为大家详细介绍了点击按钮实现水波纹效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
近来看到个不错的按钮点击效果,当点击时产生一次水波涟漪效果,挺好玩的,于是简单的实现了下(没考虑低版本浏览器兼
容问题)
先看看效果吧,如下图(录制gif软件有点渣,看起来卡卡的...)
这种效果可以由元素内嵌套canves实现,也可以由css3实现。
Canves实现实现
网上摘了一份canves实现的代码,略微去掉了些重复定义的样式并且给出js注释,代码如下
html代码:<a class="btn color-1 material-design" data-color="#2f5398">Press me!</a>
css代码:
* {
box-sizing: border-box;
outline: none;
}
body {
font-family: 'Open Sans';
font-size: 100%;
font-weight: 300;
line-height: 1.5em;
text-align: center;
}
.btn {
border: none;
display: inline-block;
color: white;
overflow: hidden;
margin: 1rem;
padding: 0;
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 5px;
}
.btn.color-1 {
background-color: #426fc5;
}
.btn-border.color-1 {
background-color: transparent;
border: 2px solid #426fc5;
color: #426fc5;
}
.material-design {
position: relative;
}
.material-design canvas {
opacity: 0.25;
position: absolute;
top: 0;
left: 0;
}
.container {
align-content: center;
align-items: flex-start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
max-width: 46rem;
}
js代码 :
var canvas = {},
centerX = 0,