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

Ссылка скопирована
CSS HTML JavaScript
4 марта 2026 1 ответ

Объясните мне, как вот такой блок можно заанимировать?
Суть анимации такая:
- пользователь наводит курсор на блок (2)
- от основного блока (1) начинает анимироваться линия до блока (2)
- такая же анимация действует на другие элементы

В макете структура компонентов вот этого блока плоская. Нужно ли дизайнеру дорабатывать макет, чтобы такую анимацию сделать? И на чем такое лучше сделать?

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

Дополнительно:

Из "сделать рукками" я знаю два варианта - svg и canvas. Сделать не сложно, по факту анимировать два прямых отрезка, которые будут вычисляться динамически. Наверняка есть сторонние библиотеки, но я не подскажу - использовать что-то типа three.js для такого случая будет перебором.

  • Понял. Спасибо.
  • Этот блок откуда изначально взялся? Это просто проект в тильде? (Или где это нарисовано ?)
    Как он будет отображатся на сайте - единая картинка, в которой нужно еще разбираться кто куда какой линией ведет, или набор спозиционированных элементов, про которых все и так понятно ?
    Очевидно, что у дизайнера неплохо бы поинтересоваться - что он понимает под словом "анимировано", пусть пример нарисует. В зависимости от его видения , возможно , ему придется дополнительным слоем рисовать анимированные линии.

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Ирина WP Ответ

    Для создания анимации для блока на веб-странице можно использовать CSS анимации. Вот пример кода на языке CSS, который создаст анимацию для блока:

    .block {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: animateBlock 2s infinite;
}
 
@keyframes animateBlock {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

    .block { width: 100px; height: 100px; background-color: red; animation: animateBlock 2s infinite; } @keyframes animateBlock { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }

    В данном примере анимация будет масштабировать блок в 1.5 раза по оси X и Y через 2 секунды (значение 2s) и будет повторяться бесконечно (значение infinite).

    Чтобы применить эту анимацию к блоку на странице, просто добавьте класс "block" к вашему HTML элементу:

    ```html

    ```

    Теперь ваш блок будет анимироваться с помощью CSS анимации. Вы также можете добавить другие свойства, такие как opacity, background-color, и т.д., чтобы создать более сложные анимации.

    Надеюсь, этот ответ поможет вам создать анимацию для блока на вашей веб-странице. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ