Случайно нашел интересный и очень простой эффект подсветки текста при наведении мыши. Выглядит подсветка довольно эффектно – при наведении мыши, фон текста, построчно и плавно заливается другим цветом, получается скользящая лента.
Давайте рассмотрим, как я это сделал эту анимацию.
В коде HTML нам понадобится любой тег. Я выбрал гиперссылку. Все остальные элементы введены для удобства и не играют никакой роли.
|
1 |
<a href="#" class="fun-hover">Классный эффект от <br> w3.org.ua</a> |
Перейдем к CSS. Классу .fun-hover добавил фон в виде градиента. Обратите внимание, что я специально сделал градиент без плавного перехода. Важной особенностью работы является задание свойств background-position: 0 и background-size: 200% которые будут меняться в анимации. Обратите внимание, часть градиента, из-за его размера 200% просто не видно. Именно он будет появляться при анимации.
При наведении мыши происходит прокрутка background и фон сменяется второй частью градиента, который был скрыт до текущего мгновения.
Итак, полный код:
|
1 2 3 4 5 6 7 8 9 10 11 |
.fun-hover { background-image: -webkit-linear-gradient(left, cadetblue 50%, yellow 50%); background-image: linear-gradient(to right, cadetblue 50%, yellow 50%); background-position: 0; background-size: 200%; -webkit-transition: all 0.4s; transition: all 0.4s; } .fun-hover:hover { background-position: -100%; } |
Посмотреть и пощупать эффект в живую можно на CodePen.
See the Pen CSS3 hover effect by Alex (@Asmodey) on CodePen.
Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS