Создание эффекта "змея" с помощью CSS и JavaScript может быть интересным заданием! Давайте разберёмся, как можно реализовать плавное появление и исчезновение кругов по мере движения курсора с использованием CSS и немного JavaScript.
### HTML
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Эффект Змея</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="snake"></div>
<script src="script.js"></script>
</body>
</html>
```
### CSS (styles.css)
```css
body {
margin: 0;
overflow: hidden;
background-color: #282c34;
height: 100vh;
}
.snake {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #61dafb;
transform: translate(-50%, -50%);
pointer-events: none; /* Игнорировать события курсора */
}
.circle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #61dafb;
opacity: 0;
transition: opacity 0.3s ease;
}
```
### JavaScript (script.js)
```javascript
const snake = document.querySelector('.snake');
const circles = [];
for (let i = 0; i < 10; i++) {
const circle = document.createElement('div');
circle.classList.add('circle');
document.body.appendChild(circle);
circles.push(circle);
}
document.addEventListener('mousemove', (event) => {
// Двигаем основной круг
snake.style.left = `${event.clientX}px`;
snake.style.top = `${event.clientY}px`;
// Двигаем и показываем круги
circles.forEach((circle, index) => {
const delay = index * 100; // Задержка для каждого круга
setTimeout(() => {
circle.style.left = `${event.clientX}px`;
circle.style.top = `${event.clientY}px`;
circle.style.opacity = 1; // Появление круга
// Скрытие круга по истечении времени
setTimeout(() => {
circle.style.opacity = 0;
}, 300);
}, delay);
});
});
```
### Объяснение
1. **HTML**: Создаём базовую структуру с основным "змеем".
2. **CSS**: Создаём стилевое оформление для основного круга (`.snake`) и для кругов (`.circle`). Устанавливаем `opacity: 0` для кругов, чтобы они были невидимы по умолчанию, и добавляем переход для плавного появления.
3. **JavaScript**:
- Создаём 10 кругов и добавляем их в массив.
- Слушаем событие `mousemove`, чтобы отслеживать положение курсора.
- Смещаем основной круг на позицию курсора.
- Для каждого круга в массиве устанавливаем его позицию и плавно отображаем его, добавляя небольшую задержку для каждого круга.
- Через 300 миллисекунд после их появления возвращаем круги к `opacity: 0`.
Таким образом, круги будут появляться и исчезать, создавая эффект "хвоста" за курсором. Вы можете экспериментировать с количеством кругов и задержками, чтобы настроить эффект под свои пожелания!