.btn{
position: relative;
border: none;
background: linear-gradient(to right,#33cccc,#ff99cc);
width: 200px;
height: 60px;
font-size: 20px;
letter-spacing: 2px;
color: white;
border-radius: 30px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.btn span{
position: absolute;
width: 30px;
height: 30px;
background-color: white;
transform: translate(-50% , -50%);
border-radius: 50%;
animation: anima 1s ease 1;
pointer-events: none;
}
@keyframes anima {
from{
width: 0;
height: 0;
opacity: 0.8;
}
to{
width: 400px;
height: 400px;
opacity: 0;
}
}
.btn:active{
box-shadow: 0 0 10px rgba(0, 0, 0, 03);
transform: scale(0.9);
}
</style>
</head>
<body>
<button class="btn">我擦好牛逼</button>
<button class="btn">我擦好牛逼</button>
<button class="btn">我擦好牛逼</button>
<button class="btn">我擦好牛逼</button>
<script>
const btns = document.querySelectorAll('button');
btns.forEach(btn => {
btn.addEventListener('click',e=>{
let span = document.createElement('span');
span.style.left=e.offsetX+'px';
span.style.top=e.offsetY+'px';
btn.appendChild(span);
setTimeout(function(){
span.remove();
}, 1000);
})
});
//这里才是重点，利用js点击事件，在点击的位置生成一个span标签，css里有span的样式，从而达到涟漪的效果
</script>
</body>
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
