Как сделать такую анимацияю mouse?

Для создания анимации по наведению курсора мышки в HTML, CSS и JavaScript можно использовать следующий подход:

1. HTML: Создадим структуру элемента, на который будет применяться анимация. Например, div с классом "animated-element":

<div class="animated-element">Hover over me!</div>

2. CSS: Опишем стили анимации с помощью CSS. Например, зададим начальное состояние элемента и состояние при наведении курсора:

.animated-element {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 100px;
    transition: transform 0.3s;
}

.animated-element:hover {
    transform: scale(1.1);
}

3. JavaScript (опционально): Если нужно более продвинутая анимация, то можно использовать JavaScript для более сложных эффектов. Например, для анимации с изменением цвета фона при наведении:

const element = document.querySelector('.animated-element');

element.addEventListener('mouseenter', function() {
    element.style.backgroundColor = '#99ff99';
});

element.addEventListener('mouseleave', function() {
    element.style.backgroundColor = '#f0f0f0';
});

Таким образом, при наведении курсора на элемент с классом "animated-element" происходит изменение его масштаба с использованием CSS анимации, а также можно добавить JavaScript для других эффектов, таких как изменение цвета фона.