Для создания эффекта, подобного движению курсора, вы можете использовать JavaScript и CSS.
1. Создайте HTML-структуру, включающую элемент, которому вы хотите добавить эффект.
```html
<div class="cursor-effect">Контент</div>
```
2. В CSS определите стили для этого элемента, включая начальные координаты.
```css
.cursor-effect {
position: fixed;
top: 0;
left: 0;
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
pointer-events: none; /* чтобы элемент не мешал взаимодействию с другими элементами */
transition: transform 0.2s ease-out; /* добавление плавности при перемещении */
}
```
3. В JavaScript добавьте обработчик событий для отслеживания движения мыши и обновления позиции элемента.
```javascript
window.addEventListener("mousemove", moveCursor);
function moveCursor(event) {
const cursor = document.querySelector(".cursor-effect");
const xPos = event.clientX - cursor.offsetWidth / 2;
const yPos = event.clientY - cursor.offsetHeight / 2;
cursor.style.transform = `translate(${xPos}px, ${yPos}px)`;
}
```
Теперь у вас появится красный круг, который будет следовать за курсором мыши. Вы можете настроить его стили и анимацию в соответствии со своими потребностями.