如何使用css实现鼠标跟随？ - Riesenzahn - 沸点 - 掘金

1年前

如何使用css实现鼠标跟随？
要实现鼠标跟随效果，可以通过 CSS 和 JavaScript 的结合来完成。以下是一个简单的实现步骤和示例代码。

### 1. HTML 结构

首先，创建一个用于跟随鼠标的元素，例如一个圆形的 div：

```html
<div class="follower"></div>
```

### 2. CSS 样式

接下来，使用 CSS 来设置跟随元素的样式，使其为一个小圆点，并设置其初始位置：

```css
.follower {
position: absolute; /* 绝对定位 */
width: 20px; /* 圆的宽度 */
height: 20px; /* 圆的高度 */
background-color: red; /* 圆的颜色 */
border-radius: 50%; /* 圆形 */
pointer-events: none; /* 不阻止鼠标事件 */
transition: transform 0.1s ease; /* 平滑跟随效果 */
}
```

### 3. JavaScript 代码

使用 JavaScript 来监听鼠标移动事件，并更新跟随元素的位置：

```javascript
const follower = document.querySelector('.follower');

document.addEventListener('mousemove', (event) => {
// 获取鼠标位置
const { clientX, clientY } = event;

// 更新跟随元素的位置
follower.style.transform = `translate(${clientX}px, ${clientY}px)`;
});
```

### 4. 整体代码示例

将上述代码整合到一起，形成完整的效果：

```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1

展开

今天学到了