失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html涟漪动画效果 CSS+JS实现水滴涟漪动画按钮效果的示例代码

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

时间:2022-06-20 15:00:46

相关推荐

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水滴涟漪动画按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

如果觉得《html涟漪动画效果 CSS+JS实现水滴涟漪动画按钮效果的示例代码》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。