要实现鼠标点击后出现波纹特效的功能,你可以使用JavaScript来监听鼠标点击事件,并在点击位置添加一个波纹动画元素。以下是一个使用JavaScript实现鼠标点击波纹特效的示例:
HTML:
<div id="container"></div>
CSS:
#container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.wave {
width: 100px;
height: 100px;
position: absolute;
background-color: rgba(0, 0, 255, 0.5);
border-radius: 50%;
opacity: 0;
pointer-events: none;
animation: waveAnim 1s linear;
}
@keyframes waveAnim {
0% {
transform: scale(0);
opacity: 0.5;
}
100% {
transform: scale(3);
opacity: 0;
}
}
JavaScript:
document.addEventListener('click', function(event) {
var wave = document.createElement('div');
wave.className = 'wave';
wave.style.left = (event.clientX - 50) + 'px';
wave.style.top = (event.clientY - 50) + 'px';
document.getElementById('container').appendChild(wave);
setTimeout(function() {
wave.remove();
}, 1000);
});
在上述示例中,我们首先创建一个容器元素,并为其设置了一个id为`container`,用来容纳波纹特效元素。通过CSS定义了波纹特效元素的样式,包括宽度、高度、背景颜色等。
在JavaScript部分,我们使用`addEventListener`方法来监听文档的点击事件。当点击事件发生时,我们创建一个波纹特效元素,并设置其样式。通过`event.clientX`和`event.clientY`获取到点击位置的坐标,然后将特效元素的位置设置在点击位置的上方。
接着,我们将创建的波纹特效元素添加到容器元素中,并使用`setTimeout`函数来延迟1秒后将特效元素移除。
通过这样的方式,当鼠标点击时,会在点击位置出现一个波纹特效元素,并在1秒后消失。你可以根据需要自定义特效元素的样式、特效动画等来调整效果。