В этом примере блок будет менять свое положение и цвет фона при наведении на него мышки. Обычно подобное изменение, то есть вернее сказать применение оператора hover для стилей используется в ссылках. Когда наводим на ссылку, то она меняет свой цвет. Однако можно пойти и дальше, менять не только цвет шрифта, но и градиент для блока и даже перемещать его. Именно такой случай и разберу в настоящей статье, когда будет и меняться градиент, и меняться положение блока.
Давайте вначале немного расскажу о сценарии. Итак, есть блок, при наведении на который курсором мышки происходят трансформации. В моем случае это и перемещение и подмена фона для блока. В изменении других стилей вас никто не ограничивает...
Так вот, самым важным мне показалось здесь связать элемент активности hover и работу стилей, ведь в другом, практически аналогичном случае, все выполнялось само собой. Что быть может и было хорошо, но имело какую-то отрешенность от действий пользователя. Теперь же становится понятно, что стили начали зависеть от положения мышки (курсора), от его наведения на блок или элемент. Появилась какая-то интерактивность. Теперь к примеру.
Пример
Из особенностей работы, хочется заметить такое свойство, что вначале блок как бы пытается ускориться, видимо где-то в отображении еще произошла задержка, а потом начинает двигаться более равномерно.
Еще хочется сказать, что если вы хотите проследить весь путь блока, то не сводите с него мышку, ведь если мышка съедет, то уже не будет действовать оператор hover и блок вернется в свое исходное положение. Теперь посмотрим код.
Смотреть код
Ну и осталось сказать, что есть здесь можно применять множество настроек, как и в том примере, на который я ссылался выше.
На что еще стоит обратить внимание, так это на возможность записи анимации
Можно записать так:
animation-name: sliden;
animation: 25s infinite ease-in-out;
animation-duration: 25s;
А можно записать так:
animation: slide 3s ease-in-out infinite;
Это удобно в том случае, когда вся анимация в одном месте, однако иногда при необходимости разделить эти параметры, приходится писать все по отдельности