基础概念: JS波纹效果是一种常见的网页交互设计,它模拟了水波纹在水面上扩散的效果。当用户点击或触摸屏幕上的某个元素时,会从该点开始产生一个逐渐扩大的圆形波纹,直到覆盖整个元素或消失。
优势:
类型:
应用场景:
常见问题及解决方法:
requestAnimationFrame
来控制动画帧率。示例代码: 以下是一个简单的点击波纹效果的实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Ripple Effect</title>
<style>
.ripple {
position: relative;
overflow: hidden;
cursor: pointer;
}
.ripple-effect {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple-animation 0.6s linear;
background: rgba(255, 255, 255, 0.7);
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="ripple" id="ripple">
Click Me!
</div>
<script>
document.getElementById('ripple').addEventListener('click', function (e) {
const circle = document.createElement('span');
const diameter = Math.max(this.clientWidth, this.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${e.clientX - this.offsetLeft - radius}px`;
circle.style.top = `${e.clientY - this.offsetTop - radius}px`;
circle.classList.add('ripple-effect');
this.appendChild(circle);
setTimeout(() => {
circle.remove();
}, 600);
});
</script>
</body>
</html>
在这个示例中,我们创建了一个简单的波纹效果,当用户点击.ripple
元素时,会在点击位置生成一个逐渐扩大的圆形波纹,并在动画结束后移除该波纹。
领取专属 10元无门槛券
手把手带您无忧上云