好的,我可以帮你用 JavaScript 编写一个简单的鼠标特效。这里是一个示例代码:

html
body {
margin: 0;
padding: 0;
background-color: #f0f0f0;
overflow: hidden;
}
.cursor {
position: absolute;
width: 20px;
height: 20px;
background-color: #4CAF50;
border-radius: 50%;
pointer-events: none;
transition: transform 0.1s, opacity 0.1s;
}
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.transform = `translate(${e.clientX - 10}px, ${e.clientY - 10}px)`;
cursor.style.opacity = 1;
});
document.addEventListener('mouseout', () => {
cursor.style.opacity = 0;
});
这个示例代码创建了一个小圆形的光标,跟随鼠标移动。当鼠标移动时,它会更新光标的位置,并设置光标的不透明度为 1。当鼠标移出页面时,光标的不透明度会设置为 0,使其隐藏。
你可以根据自己的需求对这个示例代码进行修改和扩展,比如改变光标的大小、形状、颜色,或者添加更多的视觉效果。希望这个示例对你有帮助!如果还有其他问题,欢迎继续问我。

查看详情

查看详情