Для реализации анимации или движения элемента, который следит за положением курсора, вы можете использовать JavaScript совместно с CSS.
Вот пример, который показывает, как можно реализовать такое движение только по оси X в пределах родительского элемента:
HTML:
```html
<div class="container">
<div class="block"></div>
</div>
```
CSS:
```css
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.block {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
JavaScript:
```javascript
const container = document.querySelector('.container');
const block = document.querySelector('.block');
container.addEventListener('mousemove', (event) => {
const containerRect = container.getBoundingClientRect();
const x = event.clientX - containerRect.left - block.offsetWidth / 2;
if (x >= 0 && x <= container.offsetWidth - block.offsetWidth) {
block.style.left = `${x}px`;
}
});
```
В данном примере мы добавляем обработчик события `mousemove` на родительский элемент `.container`. Внутри обработчика мы вычисляем положение курсора относительно `.container` и устанавливаем значение `left` для элемента `.block`. Если положение курсора выходит за границы `.container`, блок останется на максимальной или минимальной возможной позиции по оси X.
При движении мышью элемент `.block` будет следовать за положением курсора только по оси X в пределах `.container`.
Вы можете проверить работу примера здесь: https://codepen.io/a22432/pen/vYbEzEE