动网资源网
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Click Ripple Effect</title>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#container {
position: relative;
}
img {
max-width: 100%;
}
.ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, .6);
animation-name: ripple-animation;
animation-duration: 1s;
animation-timing-function: ease-out;
}
@keyframes ripple-animation {
from {
transform: scale(1);
opacity: .6;
}
to {
transform: scale(4);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="container">
<img src="your-image.jpg" alt="Your Image">
</div>
<script src="ripple.js"></script>
</body>
</html>JS:
// 获取图像和容器元素
var container = document.getElementById('container');
var img = container.querySelector('img');
// 添加点击事件监听器
container.addEventListener('click', function(e) {
// 计算点击位置相对于容器的位置坐标
var x = e.pageX - container.offsetLeft;
var y = e.pageY - container.offsetTop;
// 创建水波纹元素
var ripple = document.createElement('div');
ripple.classList.add('ripple');
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
// 添加水波纹元素到容器中
container.appendChild(ripple);
// 在动画完结时删除水波纹元素
setTimeout(function() {
container.removeChild(ripple);
}, 1000);
});这个代码会在图片容器中监听点击事件，当用户点击图片时，在鼠标位置创建一个基于 CSS 动画的水波纹效果。根据需要，你可以更改水波纹的样式和动画参数来实现不同的效果。
