js制作鼠标点击特效,特效由图片或者GIF代替
时间: 2024-05-10 22:17:28 浏览: 5
可以通过在鼠标点击的位置添加一个图片或GIF的元素,来实现鼠标点击特效。下面是一个示例代码:
HTML代码:
```html
<div id="click-effect"></div>
```
CSS代码:
```css
#click-effect {
position: absolute;
width: 100px;
height: 100px;
background: url('path/to/image.gif');
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease-out;
}
```
JavaScript代码:
```javascript
const clickEffect = document.getElementById('click-effect');
document.addEventListener('click', (event) => {
const x = event.clientX;
const y = event.clientY;
clickEffect.style.left = x - 50 + 'px';
clickEffect.style.top = y - 50 + 'px';
clickEffect.style.opacity = 1;
setTimeout(() => {
clickEffect.style.opacity = 0;
}, 300);
});
```
这段代码会在鼠标点击时,在点击位置添加一个大小为100x100的图片或GIF,并在0.3秒后淡出消失。你可以将CSS中的`background`属性替换成你自己的图片或GIF路径。