От автора: По мере того как с каждым релизом новых версий браузеров растет поддержка CSS3, а скучные браузеры, поддерживающие только CSS2, постепенно уходят со «сцены», у нас появляется гораздо больше вариантов для использования эффектов при наведении и переходов. Практически все кнопки призыва к действию (call-to-action), которые можно увидеть на веб-сайтах, используют в том или ином виде эффекты при наведении, потому что они привлекают внимание и делают веб-сайт более интересным.
В прошлом году я поделилась с вами набором из 8 простых переходов, которые поразят ваших пользователей, а сегодня мы рассмотрим еще 8 эффектов…
Начинаем
Как и раньше мы начнем с очень простого HTML, к которому мы затем будем применять эффекты:
|
1 |
<button>Hover Me</button> |
Мы также будем использовать набор базовых CSS стилей для всех переходов и анимаций. Мы просто зададим некоторые начальные параметры, например, цвет фона и размер шрифта.
По-настоящему важное правило находится в самом конце — это transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в промежутке равном 500 миллисекунд:
|
1 2 3 4 5 6 7 8 9 10 11 |
button { border: none; background: #3a7999; color: #f2f2f2; padding: 10px; font-size: 18px; border-radius: 5px; position: relative; box-sizing: border-box; transition: all 500ms ease; } |
А теперь к самому интересному…
1. Горизонтальная заполнение
Данный эффект, который я все чаще стала замечать, заключается в том, что полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.
Чтобы достичь такого результата, нам нужно использовать псевдо-элемент :before:
|
1 2 3 4 5 6 7 8 9 10 11 |
button:before { content:''; position: absolute; top: 0px; left: 0px; width: 0px; height: 42px; background: rgba(255,255,255,0.3); border-radius: 5px; transition: all 2s ease; } |
Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Я задала для него ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:
|
1 2 3 |
button:hover:before { width: 100%; } |
2. Вертикальное заполнение
Данный эффект очень похож на предыдущий, за исключением того, что теперь мы будем анимировать высоту, чтобы цветовое заполнение происходило сверху:
|
1 2 3 4 5 6 7 8 9 10 11 |
button:before { content:''; position: absolute; top: 0px; left: 0px; width: 100%; height: 0px; background: rgba(255,255,255,0.3); border-radius: 5px; transition: all 2s ease; } |
Здесь мы изменяем лишь параметр высоты вместо ширины:
|
1 2 3 |
button:hover:before { height: 42px; } |
3. «Кнопка-призрак»
Сейчас мы создадим простой, но очень эффектный переход для нашей кнопки. Эффект «кнопки-призрака» заключается в том, что мы инвертируем цвет внутри кнопки и добавляем границу:
|
1 2 3 4 5 |
button:hover { background: rgba(0,0,0,0); color: #3a7999; box-shadow: inset 0 0 0 3px #3a7999; } |
При наведении я задаю для кнопки прозрачный фон, чтобы он подходил к окружающему фону вокруг элемента. Затем я добавляю цвет и простую тень.
4. Появление иконки
Данный эффект замечательно подходит для различных действий, например, добавление товара в корзину или отправка формы. Он заключается в том, чтобы заставить иконку плавно появиться слева от текста, когда пользователь наводит курсором мыши на кнопку.
Первым делом я немного увеличила внутренний отступ, чтобы для появляющейся иконки было место, и добавила свойство overflow со значением hidden:
|
1 2 3 4 |
button{ padding: 10px 35px; overflow:hidden; } |
Далее я добавила иконку в виде тележки для покупок (для этого я использую иконочный шрифт Font Awesome) в псевдо-элемент before и расположила его за пределами кнопки:
|
1 2 3 4 5 6 7 8 |
button:before { font-family: FontAwesome; content:"\f07a"; position: absolute; top: 11px; left: -30px; transition: all 200ms ease; } |
Теперь все, что нам остается сделать, — это установить свойство left:
|
1 2 3 |
button:hover:before { left: 7px; } |
5. Эффект подпрыгивания
В данной анимации мы установим для кнопки несколько ключевых кадров (keyframes), чтобы получить при наведении на кнопку эффект подпрыгивания. Это всегда отлично привлекает внимание пользователей. Сначала нам нужно создать ключевые кадры:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes bounce { 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } |
А теперь мы просто добавляем анимацию при наведении:
|
1 2 3 |
button:hover { animation: bounce 1s; } |
6. Искажение
Искажение, определенно, является одним из наболее специфичных трансформаций в CSS3. Данный эффект присутствует в программе Photoshop уже на протяжении многих лет, но его появление в CSS3, по меньшей мере, стало настоящим сюрпризом. Тем не менее, это интересный переход, и его использование является очень простым. Просто установим его при наведении:
|
1 2 3 |
button:hover { transform: skew(-10deg); } |
7. Пунктирная граница
Этот эффект очень похож на эффект с «кнопкой-призраком», но вместо сплошной границы у нас будет пунктирная линия. Все, что нам действительно нужно сделать, — это добавить границу у кнопки и инвертировать цвета:
|
1 2 3 4 5 6 7 8 |
button { border: 3px solid #3a7999; } button:hover { border: 3px dotted #3a7999; color: #3a7999; background: rgba(0,0,0,0); } |
8. Эффект 3D переворота
Этот заключительный эффект будет немного сложнее, т.к. в нем используется переворот кнопки для отображения другого сообщения, которое мы добавили в псевдо-элемент after у нашей кнопки.
Давайте начнем с того, что зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:
|
1 2 3 |
button { transform-style: preserve-3d; } |
После этого нам нужно заняться нашим псевдо-элементом after:
|
1 2 3 4 5 6 7 8 9 10 11 |
button:after { top: -100%; left: 0px; width: 100%; position: absolute; background: #3a9999; border-radius: 5px; content: 'Flipped'; transform-origin: left bottom; transform: rotateX(90deg); } |
Я добавила его сверху, перед кнопкой, и выставила такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, я установила нижний левый угол элемента и указала вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:
|
1 2 3 4 |
button:hover { transform-origin: center bottom; transform: rotateX(-90deg) translateY(100%); } |
Как видите, чтобы активировать данный эффект я переместила опорную точку трансформации в центр, а также повернула сам элемент, чтобы реализовать трансформацию.
Автор: Sara Vieira
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.
Комментарии (4)