Как использовать анимацию наведения в веб-дизайне
Цвет при наведении
Установка цвета элемента при наведении курсора помогает сосредоточить внимание посетителей на элементе и дает представление и представление о желаемом значении этого элемента. Вы можете изменить цвет элемента при наведении курсора. Для этого выберите элемент и на панели свойств перейдите в раздел «Анимация включена», щелкните ссылку «Наведение», а затем установите флажок «Наведение». Измените цвет, который будет применяться при наведении курсора.
Граница при наведении
Граница элемента также важна для улучшения взаимодействия элементов и привлечения внимания посетителей. Вы можете изменить границу наведения для таких элементов, как значок, изображение, фигура, группа, сетка и т. Д. В разделе «Наведение» панели свойств установите флажок «Наведение». Измените границу, которая будет отображаться при наведении курсора на элемент.
Радиус при наведении
Для изображений и фигур, групп и ячеек сетки вы можете изменить радиус при наведении курсора. Благодаря этому свойству элементы становятся привлекательными, побуждая к действию (кнопки «Купить», «Читать дальше» и т. Д.) И делая ваш дизайн уникальным. В разделе «Наведение» на панели свойств включите режим наведения. Перетащите ползунок «Радиус», чтобы установить его значение при наведении курсора.
Тень при наведении
Вы можете изменить свойство Shadow при наведении курсора для текстов и других элементов. Чтобы установить тень при наведении, добавьте или выберите элемент. Затем щелкните ссылку Hover на панели свойств, установите флажок Hover, измените тень, которая будет применяться при наведении курсора. Вы можете начать с одного из предустановок тени и при необходимости настроить его.
Прозрачность при наведении
Вы можете изменить прозрачность элемента при наведении курсора, чтобы добавить интерактивности и привлекательности дизайну веб-сайта. На панели свойств щелкните ссылку «Наведение» и установите флажок «Наведение». Установите прозрачность, которая будет применяться при наведении курсора. Щелкните где-нибудь в блоке, чтобы отменить выбор элемента. Наведите указатель мыши на элемент, чтобы проверить изменение прозрачности.
Двигаться при наведении
Эффекты анимации при наведении, используемые на современных веб-сайтах, стали более сложными. Один из примеров эффекта - движение элемента при наведении курсора. Вы можете добавить перемещение элемента при наведении курсора. Добавьте или выберите элемент и перейдите на панель свойств. Щелкните ссылку Hover и установите флажок Hover. Задайте значения для свойства Move X, Y.
Вращение при наведении
Вращение при наведении курсора - следующий важный и сложный эффект. Чтобы повернуть элемент при наведении курсора, добавьте или выберите элемент и перейдите на панель свойств. Перейдите и щелкните ссылку Hover в разделе Animation On, а затем установите флажок Hover. С помощью ползунка установите угол поворота или введите значение в поле ввода. Поддерживаемые значения угла поворота от 0 до 359.
Масштабировать при наведении
Масштабирование может выглядеть как самая естественная реакция на ваш курсор. Поэтому он может быть очень популярен. Вы можете легко добавить на свой сайт масштабирование при наведении курсора. Для этого добавьте или выберите элемент, а затем перейдите на панель свойств. Щелкните ссылку Hover в разделе Animation On и установите флажок Hover. Прокрутите вниз до свойств «Масштаб», «Повернуть» и «Переместить». Фактический размер равен 100.
Продолжительность наведения
Вы можете управлять анимацией наведения, задав ее Продолжительность. Установите продолжительность анимации при наведении курсора, добавьте или выберите элемент и перейдите на панель свойств. Выберите ссылку «Анимация при наведении» в разделе «Наведение» и установите флажок «Наведение». Поддерживаемые значения для ползунка от 10 до 200, при необходимости вы можете ввести в это поле большее число.
Цвет фона для градиента при наведении курсора
Добавляя анимацию наведения к фигуре с фоном, вы можете изменить сплошную заливку на что-нибудь привлекательное, например градиент. Для этого выберите фигуру и перейдите к ссылке при наведении курсора на панель свойств. Щелкните ссылку Animation On -> Hover и установите флажок Hover. Выберите тип градиента для фона и установите градиент.
Фоновое изображение для изображения при наведении курсора
Вы также можете изменить заливку на изображения и даже изменить одно фоновое изображение на другое при наведении курсора, что может сильно развлечь ваших посетителей. Выберите фигуру и добавьте изображение для фона. Перейдите в раздел Animation On на панели свойств и нажмите Hover. Включите эффект наведения и выберите изображение в качестве типа фона. Выберите изображение при наведении. Тестовое задание.