为了创建一个简单的鼠标球形特效，你可以使用 HTML、CSS 和 JavaScript。以下是一个基本的示例，该示例使用了 HTML 的 <div> 元素作为球形特效的背景，并通过 JavaScript 和 CSS 实现了跟随鼠标移动的效果。
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; overflow: hidden; } #ball { position: absolute; width: 50px; height: 50px; background-color: #3498db; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; /* 防止特效阻碍用户与页面其他元素的交互 */ } </style> </head> <body> <div id="ball"></div> <script> // 获取球形元素 const ball = document.getElementById('ball'); // 监听鼠标移动事件 document.addEventListener('mousemove', (event) => { // 获取鼠标的坐标 const mouseX = event.clientX; const mouseY = event.clientY; // 将球形元素移动到鼠标坐标位置 ball.style.left = mouseX + 'px'; ball.style.top = mouseY + 'px'; }); </script> </body> </html>
在这个例子中，我们创建了一个 <div> 元素作为球形特效的背景，并用 CSS 设置了其样式，使其呈现为一个圆形（通过 border-radius: 50%）。JavaScript 部分监听了鼠标的移动事件，并通过修改球形元素的位置，实现了球形特效跟随鼠标移动的效果。
你可以根据自己的需要进行样式和交互的修改，这只是一个基本的起点。
