Чтобы создать эффект фонарика с помощью анимации на JavaScript и CSS, вы можете воспользоваться различными методами. Мы можем использовать 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">
<link rel="stylesheet" href="styles.css">
<title>Эффект Фонарика</title>
</head>
<body>
<div class="light" id="light"></div>
<div class="grid"></div>
<script src="script.js"></script>
</body>
</html>
```
### CSS (styles.css)
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
height: 100vh;
background: #333; /* Цвет фона */
}
.grid {
width: 100%;
height: 100%;
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px; /* Размер сетки */
}
.light {
position: absolute;
width: 200px; /* Ширина "фонарика" */
height: 200px; /* Высота "фонарика" */
border-radius: 50%;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
pointer-events: none; /* Забыть о взаимодействии с "фонариком" */
transition: background 0.3s ease;
}
```
### JavaScript (script.js)
```javascript
const light = document.getElementById('light');
document.addEventListener('mousemove', (e) => {
const mouseX = e.clientX; // Получаем координату X курсора
const mouseY = e.clientY; // Получаем координату Y курсора
// Устанавливаем позицию фонарика по координатам курсора
light.style.left = `${mouseX - light.offsetWidth / 2}px`;
light.style.top = `${mouseY - light.offsetHeight / 2}px`;
});
```
### Объяснение:
1. **HTML**: Мы создаем `div` для фона и `div` для эффекта фонарика.
2. **CSS**:
- Устанавливаем фон и сетку.
- "Фонарик" имеет радиальный градиент, который создает эффект света.
3. **JavaScript**:
- Мы отслеживаем движение курсора мыши и обновляем позицию "фонарика", основываясь на его координатах.
С помощью этого кода у вас будет простой эффект фонарика, который следует за курсором и освещает область на экране! Вы можете настроить размеры "фонарика" и цвета градиента, чтобы он выглядел так, как вам нужно.