html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码

代码如下所示：

Document

.btn{

display: block;

width: 300px;

height: 100px;

margin: 50px;

outline: 0;

overflow: hidden;

position: relative;

transition: .3s;

cursor: pointer;

user-select: none;

text-align: center;

line-height: 100px;

font-size: 50px;

background: tomato;

color: #fff;

border-radius: 10px;

}

.btn>span{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;}

.btn>span:after{

content: '';

position: absolute;

background: transparent;

border-radius:50%;

width: 100%;

padding-top: 100%;

margin-left: -50%;

margin-top: -50%;

left: var(--x,-100%);

top: var(--y,-100%);

}

.btn:active{

background: orangered;

}

.btn>input[type=checkbox]{

display: none

}

.btn>input[type=checkbox]+span:after{

animation: ripple-in 1s;

}

.btn>input[type=checkbox]:checked+span:after{

animation: ripple-out 1s;

}

@keyframes ripple-in{

from {

transform: scale(0);

background: rgba(0,0,0,.25)

}

to {

transform: scale(1.5);

background: transparent

}

}

@keyframes ripple-out{

from {

transform: scale(0);

background: rgba(0,0,0,.25)

}

to {

transform: scale(1.5);

background: transparent

}

}

button

function ripple(dom,ev){

console.log(ev)

var x = ev.offsetX;

var y = ev.offsetY;

dom.style.setProperty('--x',x+'px');

dom.style.setProperty('--y',y+'px');

}

到此这篇关于CSS+JS实现水滴涟漪动画按钮效果的示例代码的文章就介绍到这了,更多相关css水滴涟漪动画按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！