Главная › Mozilla Firefox › Оригинальные hover эффекты при помощи css3. Красивый эффект при наведении (:before и:after). Простые примеры для кнопок

Оригинальные hover эффекты при помощи css3. Красивый эффект при наведении (:before и:after). Простые примеры для кнопок

В данном видео разберем эффект анимированного затемнения картинки на чистом CSS .при наведении на блок с картинкой появляется текст, а задний фон с изображением затемняется.

В уроке задействуем:

псевдоклассы :before и : after ;
используем пересечение цветов при помощи mix-blend-mode: darken;
для анимации воспользуемся transform и transition .

HTML структура кода

Делаем основной каркас блока с картинкой

Скачать архив с урока - Анимация при наведении

Скачивайте архив, распакуйте у себя на компьютере. В нем предварительный каркас html и css файлов, перекиньте их в свою среду разработки, откройте html файл и опишем в нем блок с картинкой.

Между тегами

, пишем, блок div с классом .dws-wrapper (это будет оберткой ), затем ссылка . в ней размещаем картинку, а за ней новый блок с классом .dws-text где будет располагаться текст. Делаем заголовок, параграф,

Div.dws-wrapper>a>img+div.dws-text>h3+p

Жмем применить.

Вставим путь к картинке, и заполним alt .

Пропишем заголовок «Эффект при наведении в CSS3 » и вставим в параграф текст «При помощи CSS3 можно творить свою магию. Следи за нами и подписывайся на канал DWS TV ».

Описываем стили в CSS

Обертке присвоим outline в 1 пик. что бы могли отслеживать размеры блока. Затем зададим фиксированную ширину в 350px. Отцентрируем блок по середине и зададим отступ с верху в 200px.

Затем что бы отцентровать картинку и вписать ее в блок задаем ширину картинке в 100%.

Dws-wrapper a img{ width: 100%; }

Позиционируем текст по центру блока при помощи position:absolute; с параметрами выравнивания с верху и лева 0 px.

Dws-text{ position: absolute; top: 0; left: 0; }

Чтобы текст от позиционировался пропишем обертке position: relative; , добавим border: solid 5px rgba(255, 255, 255, 0.8); , background: linear-gradient(20deg, #f00, #00f); , outline уберем.

Dws-wrapper{ width: 350px; margin: 200px auto 0; position: relative; border: solid 5px rgba(255, 255, 255, 0.8); background: linear-gradient(20deg, #f00, #00f); }

Dws-wrapper a{ display: block; color: #fff; text-decoration: none; }

Блоку с текстом добавим отступы padding: 40px 20px; и немного изменим размер шрифта.

Dws-text{ position: absolute; top: 0; left: 0; padding: 40px 20px; } .dws-text h3{ font-size: 25px; } .dws-text p{ font-size: 14px; }

Описываем псевдоклассы :before :after

Dws-wrapper a:before, .dws-wrapper a:after{ content: ""; position: absolute; width: 200%; height: 200%; }

Так как нами не заданы координаты позиционирования и цвет псевдо блока, мы не видим эти элементы, нам нужно для каждого псевдокласса задать свои координаты и цвет.

Отбираем ссылку с псевдоклассом before и указываем ей right: 0; и bottom: -100%; цвет сделаем с прозрачностью в режиме rgba background: rgba(230, 12, 50, 0.8); и трансформируем блок под небольшим углом transform: skew(-45deg) translateX(100%);

Dws-wrapper a:before{ right: 0; bottom: -100%; background: rgba(230, 12, 50, 0.8); transform: skew(-45deg) translateX(100%); }

Аналогично проделаем для псевдокласса after , заменим координаты, цвет и трансформацию отразим с другой стороны.

Dws-wrapper a:after{ left: 0; top: -100%; background: rgba(11, 72, 174, 0.8); transform: skew(135deg) translateX(-100%); }

Анимируем элементы в CSS

После того как описали стили основной структуры приступаем к анимированию. Придаем пластичность и движение при помощи псевдокласса transition: .5s ease-in-out;

.dws-wrapper a:before, .dws-wrapper a:after{ content: ""; position: absolute; width: 200%; height: 200%; transition: .5s ease-in-out; }

Далее добавляем координаты перемещения псевдоклассу before при наведении на него. Делаем перемещение по оси X в точку 0 при помощи трансформации transform: skew(-45deg) translateX(0%); .

Dws-wrapper:hover a:before{ transform: skew(-45deg) translateX(0%); }

Тоже самое проделываем для псевдокласса after только уже с лева на право transform: skew(135deg) translateX(0%); .

Dws-wrapper:hover a:after{ transform: skew(135deg) translateX(0%); }

Затем основному блоку сделаем overflow: hidden; это позволит скрыть все что выходит за его пределы.

Dws-wrapper{ width: 350px; margin: 200px auto 0; position: relative; border: solid 5px rgba(255, 255, 255, 0.8); background: linear-gradient(20deg, #f00, #00f); overflow: hidden; }

Блок с текстом в начальной точки скроем при помощи opacity: 0; , и сделаем ему z-index в приоритетность 100.

.dws-text{ position: absolute; top: 0; left: 0; padding: 40px 20px; opacity: 0; z-index: 100; }

Описываем ему отображение по наведению при помощи opacity: 1;

Dws-wrapper:hover .dws-text{ opacity: 1; }

Теперь немного анимируем появление текста, при помощи transition: .5s ease;

.dws-text{ position: absolute; top: 0; left: 0; padding: 40px 20px; opacity: 0; z-index: 100; transition: .5s ease; } .dws-wrapper a:before, .dws-wrapper a:after{ content: ""; position: absolute; width: 200%; height: 200%; transition: .5s ease-in-out; mix-blend-mode: darken; }

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

| 18.02.2016

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition - «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

Color:hover { background:#53ea93; }

2. Появление рамки

Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:

Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }

3. Свинг

Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

@keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6:

Fade { opacity: 1; } .fade:hover { opacity: 0.6; }

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }

7. Трансформация в круг

Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:

Circle:hover { border-radius: 70%; }

8. Вращение

Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer	Поддерживается версией IE 10 и выше
Chrome	Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-)
Firefox	Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-)
Opera	Поддерживается с версии 12.1
Safari	Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-)

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

В CSS3 предусмотрено очень много интересных эффектов. Данная статья посвящена эффектам анимации hover

В этой статье приведено 10 распространенных эффектов анимации на чистом CSS, которые украсят и освежат любой сайт. К тому же сделать их может любой новичок.

Ниже будут подробно рассмотрены следующие эффекты:

1. Крутящийся элемент

3. «Падающая» иконка

4. Выезжающая иконка

1. Крутящийся элемент

Хорошо подходит для маленьких элементов типа закрывающего крестика или стрелочки. На текстовые ссылки такое, конечно, вешать не надо.

Разметка здесь очень простая:

22 23 24 25 26 27 28 29 30 31

.my-el { border : 1px solid rebeccapurple; cursor : pointer ; background : rgb (219 , 199 , 199 ) ; width : 17px ; height : 17px ; text-align : center ; font-size : 14px ; font-family : Arial; font-weight : bold ; opacity: 0.6 ; z-index : 100 ; cursor : pointer ; -moz-transform: rotate(0deg) ; -webkit-transform: rotate(0deg) ; -o-transform: rotate(0deg) ; -ms-transform: rotate(0deg) ; transform: rotate(0deg) ; -webkit-transition: all 600ms; -moz-transition: all 600ms; -o-transition: all 600ms; transition: all 600ms; } .my-el :hover { opacity: 1 ; -moz-transform: rotate(180deg) ; -webkit-transform: rotate(180deg) ; -o-transform: rotate(180deg) ; -ms-transform: rotate(180deg) ; transform: rotate(180deg) ) ; }

Непосредственно за кручение отвечает свойство transform, все остальное — украшательства (еще в этом примере плавно меняется значение прозрачности opacity).

2. Дрожащий / дергающийся элемент (анимация Tada)

Верстка здесь такая же, как в предыдущем примере:

А в css нужно написать не только свойства этого div, но и саму анимацию:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

.my-el2 { border : 1px solid rebeccapurple; background : rgb (219 , 199 , 199 ) ; width : 17px ; height : 17px ; text-align : center ; font-size : 14px ; font-family : Arial; font-weight : bold ; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; } .my-el2 :hover { -webkit-animation-name: Tada; -moz-animation-name: Tada; -o-animation-name: Tada; animation-name: Tada; } @-webkit-keyframes Tada { 0% { -webkit-transform: scale(1 ) } 10% , 20% { -webkit-transform: scale(0.9 ) rotate(-3deg) } 30% , 50% , 70% , 90% { -webkit-transform: scale(1.1 ) rotate(3deg) } 40% , 60% , 80% { -webkit-transform: scale(1.1 ) rotate(-3deg) } 100% { -webkit-transform: scale(1 ) rotate(0 ) } } @-moz-keyframes Tada { 0% { -moz-transform: scale(1 ) } 10% , 20% { -moz-transform: scale(0.9 ) rotate(-3deg) } 30% , 50% , 70% , 90% { -moz-transform: scale(1.1 ) rotate(3deg) } 40% , 60% , 80% { -moz-transform: scale(1.1 ) rotate(-3deg) } 100% { -moz-transform: scale(1 ) rotate(0 ) } } @-o-keyframes Tada { 0% { -o-transform: scale(1 ) } 10% , 20% { -o-transform: scale(0.9 ) rotate(-3deg) } 30% , 50% , 70% , 90% { -o-transform: scale(1.1 ) rotate(3deg) } 40% , 60% , 80% { -o-transform: scale(1.1 ) rotate(-3deg) } 100% { -o-transform: scale(1 ) rotate(0 ) } } @keyframes Tada { 0% { transform: scale(1 ) } 10% , 20% { transform: scale(0.9 ) rotate(-3deg) } 30% , 50% , 70% , 90% { transform: scale(1.1 ) rotate(3deg) } 40% , 60% , 80% { transform: scale(1.1 ) rotate(-3deg) } 100% { transform: scale(1 ) rotate(0 ) } }

3. «Падающая» иконка

Верстка этого элемента состоит из внешнего элемента А со SPAN внутри, который содержит иконку в качестве background:

1	Текст кнопки

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

Как видно из примера, анимация происходит вследствие изменения значения top у блока с иконкой. У внешнего блока нужно обязательно указывать overflow: hidden, так как иконка уезжает за его пределы.

4. Выезжающая иконка

Здесь тот же принцип, что и в предыдущем примере, – анимируется положение иконки внутри ссылки при наведении на нее. Только верстка немного изменена — иконка задается как background к псевдоэлементу:before.

1	Текст кнопки

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

Внешний элемент.btn2 должен иметь position: relative, так как блок с иконкой спозиционирован абсолютно. Также есть небольшая анимация margin на span с текстом внутри.btn2 (.btn2:hover span), которая отодвигает его при появлении иконки.

5. Выезжающая иконка как на CoolWebMasters

Анимация достигается за счет изменения background-position элемента. Нужно подготовить картинку с двумя состояниями иконки:

И верстка:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

6. Кнопка с бликом

Блик делается через псевдоэлемент:after, который повернут на 35 градусов.

Верстка совсем простая, достаточно присвоить ссылке класс:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

.btn4 { background : green ; display : inline-block; padding : 10px ; position : relative ; color : white ; text-decoration : none ; font-family : arial; border-radius : 5px ; overflow : hidden ; } .btn4 :after { content : "" ; width : 45px ; height : 95px ; display : block ; background : rgba(194 , 194 , 194 , 0.2 ) ; right : -100px ; position : absolute ; top : -24px ; -webkit-transform-origin: 0 0 ; -webkit-transform: rotate(35deg) ; -moz-transform-origin: 0 0 ; -moz-transform: rotate(35deg) ; -ms-transform-origin: 0 0 ; -ms-transform: rotate(35deg) ; transform: rotate(35deg) ; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .btn4 :hover :after { right : 10px ; }

7. Кнопка с увеличивающимся внутренним border

Здесь внутренний border сделан через inset text-shadow, которая и анимируется.

CSS для анимации здесь такой:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.btn5 { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .btn5 :hover { box-shadow: inset 0 0 0 30px #53a7ea ; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

8. Качающаяся кнопка (анимация Swing)

Верстка здесь такая же, как в предыдущем примере, только ссылке задан класс btn6. В CSS нужно прописать стиль для:hover и саму анимацию swing.

9. Двойной текст с использованием data-hover

А вот еще один интересный эффект, который подойдет к текстовым ссылкам на цветном фоне:

В CSS анимируется псевдоэлемент before, в который и передается текст из data-hover:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.btn7 :hover :before { -webkit-transform: scale(1 ) translateX(0px ) translateY(0px ) rotate(0deg) ; -moz-transform: scale(1 ) translateX(0px ) translateY(0px ) rotate(0deg) ; transform: scale(1 ) translateX(0px ) translateY(0px ) rotate(0deg) ; opacity: 1 ; } .btn7 :before { color : white ; content : attr(data-hover) ; position : absolute ; opacity: 0 ; text-shadow : 0 0 1px rgba(255 , 255 , 255 , 0.3 ) ; -webkit-transform: scale(1.1 ) translateX(10px ) translateY(-10px ) rotate(4deg) ; -moz-transform: scale(1.1 ) translateX(10px ) translateY(-10px ) rotate(4deg) ; transform: scale(1.1 ) translateX(10px ) translateY(-10px ) rotate(4deg) ; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none ; }

10. Выезжающий текст снизу с использованием data-hover

Как и в предыдущем примере, при наведении выезжает надпись, дублирующая текст ссылки, интересно будут смотреться разноцветные надписи.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

.btn8 { padding : 0 30px ; height : 1.2em ; overflow : hidden ; font-size : 20px ; display : inline-block; position : relative ; text-decoration : none ; color : white ; font-family : arial; } .btn8 span { position : relative ; padding : 0 5px ; display : inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .btn8 span:before { position : absolute ; width : 100% ; color : rgb (8 , 120 , 213 ) ; left : 0 ; top : 100% ; content : attr(data-hover) ; font-weight : 700 ; -webkit-transform: translate3d(0 , 0 , 0 ) ; -moz-transform: translate3d(0 , 0 , 0 ) ; transform: translate3d(0 , 0 , 0 ) ; } .btn8 :hover span { -webkit-transform: translateY(-100% ) ; -moz-transform: translateY(-100% ) ; transform: translateY(-100% ) ; }

Структура разметки весьма проста и интуитивна. Создаем контейнер, который будет содержать изображение и всю остальную информацию.

Внутри элемента view содержится элемент с классом mask , который реализует наш эффект с использованием CSS3. В элементе с классом mask содержится заголовок, описание и ссылка (Для некоторых примеров элемент с классом mask используется отдельно, а содержание помещается в контейнер с классом content ).

Заголовок

Текст сообщения

Кнопка

CSS

После создания разметки зададим стили. Для нашего набора эффектов будет использоваться класс с общими правилами, а специфические свойства будут добавляться для каждого примера в виде отдельных классов. В тексте урока префиксы производителей браузеров будут опущены для большей наглядности.

View { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 } .view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 }

А теперь представим 10 эффектов. Открывайте демонстрационную страницу в отдельном окне или вкладке, смотрите и изучайте код.

Пример 1

Добавляем специальный класс view-first к элементу с классом view для данного эффекта. Специальный класс будет добавляться в каждом примере к элементу с классом view (view-first, view-second, view-third, и так далее).

В данном примере будут использоваться базовые переходы для создания отличного эффекта.

View-first img { transition: all 0.2s linear; } .view-first .mask { opacity: 0; background-color: rgba(219,127,8, 0.7); transition: all 0.4s ease-in-out; } .view-first h2 { transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out; } .view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear; } .view-first a.info{ opacity: 0; transition: all 0.2s ease-in-out; }

А теперь перейдем к основе нашего эффекта. Когда курсор мыши проходит над изображением мы используем задержку для имитации простой анимации. Свойство transition-delay , которое используется в псевдо-классах hover , может вносить изменения для отличия от обычного класса. В данном примере мы не используем задержки в обычном классе, но в псевдо-классах hover запуск переходов немного задерживается. Когда курсор мыши покидает объект, будет использоваться значение по умолчанию 0s, и "восстановление" произойдет быстро.

View-first:hover img { transform: scale(1.1); } .view-first:hover .mask { opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { opacity: 1; transform: translateY(0px); } .view-first:hover p { transition-delay: 0.1s; } .view-first:hover a.info { transition-delay: 0.2s; }

Пример 2

Во втором примере мы добавляем специальный класс view-second , но элемент с классом mask будет пустым, а содержание будет помещено в элемент с классом content .

Стиль #2

Описание

Кнопка

Здесь класс mask имеет другие атрибуты для построения эффекта. Мы собираемся использовать свойства трансформации (translate и rotate ):

View-second img { transition: all 0.2s ease-in; } .view-second .mask { background-color: rgba(115,146,184, 0.7); width: 300px; padding: 60px; height: 300px; opacity: 0; transform: translate(265px, 145px) rotate(45deg); transition: all 0.2s ease-in-out; } .view-second h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: translate(200px, -200px); transition: all 0.2s ease-in-out; } .view-second p { transform: translate(-200px, 200px); transition: all 0.2s ease-in-out; } .view-second a.info { transform: translate(0px, 100px); transition: all 0.2s 0.1s ease-in-out; }

Для нашего эффекта будет использоваться трансформация translate для перемещения элементов на место. А маска будет также вращаться. Элементы описания будут появляться с небольшой задержкой друг за другом.

View-second:hover .mask { opacity:1; transform: translate(-80px, -125px) rotate(45deg); } .view-second:hover h2 { transform: translate(0px,0px); transition-delay: 0.3s; } .view-second:hover p { transform: translate(0px,0px); transition-delay: 0.4s; } .view-second:hover a.info { transform: translate(0px,0px); transition-delay: 0.5s; }

Пример 3

В третьем примере мы будем использовать трансформации translate и rotate для вывода наших элементов описания:

View-third img { transition: all 0.2s ease-in; } .view-third .mask { background-color: rgba(0,0,0,0.6); opacity: 0; transform: translate(460px, -100px) rotate(180deg); transition: all 0.2s 0.4s ease-in-out; } .view-third h2{ transform: translateY(-100px); transition: all 0.2s ease-in-out; } .view-third p { transform: translateX(300px) rotate(90deg); transition: all 0.2s ease-in-out; } .view-third a.info { transform: translateY(-200px); transition: all 0.2s ease-in-out; }

Достаточно простые инструкции для получения эффекта.

View-third:hover .mask { opacity:1; transition-delay: 0s; transform: translate(0px, 0px); } .view-third:hover h2 { transform: translateY(0px); transition-delay: 0.5s; } .view-third:hover p { transform: translateX(0px) rotate(0deg); transition-delay: 0.4s; } .view-third:hover a.info { transform: translateY(0px); transition-delay: 0.3s; }

Пример 4

В четвертом примере будет использоваться простое масштабирование изображения и содержания с использованием трансформации scale . Для изображения будет установлена задержка 0.2s в стилях, но при наведении курсора задержка будет 0s. Поэтому при наведении курсора мыши эффект проявится немедленно, а при убирании курсора мыши будет задержка.

View-fourth img { transition: all 0.4s ease-in-out 0.2s; opacity: 1; } .view-fourth .mask { background-color: rgba(0,0,0,0.8); opacity: 0; transform: scale(0) rotate(-180deg); transition: all 0.4s ease-in; border-radius: 0px; } .view-fourth h2{ opacity: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transition: all 0.5s ease-in-out; } .view-fourth p { opacity: 0; transition: all 0.5s ease-in-out; } .view-fourth a.info { opacity: 0; transition: all 0.5s ease-in-out; }

Простые инструкции для получения эффекта. CSS3 может все.

View-fourth:hover .mask { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: 0.2s; } .view-fourth:hover img { transform: scale(0); opacity: 0; transition-delay: 0s; } .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info{ opacity: 1; transition-delay: 0.5s; }

Пример 5

В пятом примере содержание будет выскальзывать слева благодаря использованию свойства translate в сочетании с функцией перехода ease-in-out .

View-fifth img { transition: all 0.3s ease-in-out; } .view-fifth .mask { background-color: rgba(146,96,91,0.3); transform: translateX(-300px); opacity: 1; transition: all 0.4s ease-in-out; } .view-fifth h2{ background: rgba(255, 255, 255, 0.5); color: #000; box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5); } .view-fifth p{ opacity: 0; color: #333; transition: all 0.2s linear; }

При наведении курсора мыши изображение выскальзывает вправо, и на его место слева выдвигается описание, как бы сдвигая картинку:

View-fifth:hover .mask { transform: translateX(0px); } .view-fifth:hover img { transform: translateX(300px); transition-delay: 0.1s; } .view-fifth:hover p{ opacity: 1; transition-delay: 0.4s; }

Пример 6

В данном примере мы содержание будет "падать" с переднего плана, уменьшая масштаб от 10 до 1 (нормального размера). А кнопка будет выскальзывать снизу.

View-sixth img { transition: all 0.4s ease-in-out 0.5s; } .view-sixth .mask{ background-color: rgba(146,96,91,0.5); opacity:0; transition: all 0.3s ease-in 0.4s; } .view-sixth h2{ opacity:0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(10); transition: all 0.3s ease-in-out 0.1s; } .view-sixth p { opacity:0; transform: scale(10); transition: all 0.3s ease-in-out 0.2s; } .view-sixth a.info { opacity:0; transform: translateY(100px); transition: all 0.3s ease-in-out 0.1s; }

Обратная трансформация также выполняется плавно:

View-sixth:hover .mask { opacity:1; transition-delay: 0s; } .view-sixth:hover img { transition-delay: 0s; } .view-sixth:hover h2 { opacity: 1; transform: scale(1); transition-delay: 0.1s; } .view-sixth:hover p { opacity:1; transform: scale(1); transition-delay: 0.2s; } .view-sixth:hover a.info { opacity:1; transform: translateY(0px); transition-delay: 0.3s; }

Пример 7

В седьмом эффекте идея заключается в использовании вращения изображения вокруг центра и одновременного уменьшения его масштаба. А описание затем опускается сверху.

View-seventh img{ transition: all 0.5s ease-out; opacity: 1; } .view-seventh .mask { background-color: rgba(77,44,35,0.5); transform: rotate(0deg) scale(1); opacity: 0; transition: all 0.3s ease-out; transform: translateY(-200px) rotate(180deg); } .view-seventh h2{ transform: translateY(-200px); transition: all 0.2s ease-in-out; } .view-seventh p { transform: translateY(-200px); transition: all 0.2s ease-in-out; } .view-seventh a.info { transform: translateY(-200px); transition: all 0.2s ease-in-out; }

При наведении курсора мыши элементы описания появляются с задержкой:

View-seventh:hover img{ transform: rotate(720deg) scale(0); opacity: 0; } .view-seventh:hover .mask { opacity: 1; transform: translateY(0px) rotate(0deg); transition-delay: 0.4s; } .view-seventh:hover h2 { transform: translateY(0px); transition-delay: 0.7s; } .view-seventh:hover p { transform: translateY(0px); transition-delay: 0.6s; } .view-seventh:hover a.info { transform: translateY(0px); transition-delay: 0.5s; }

Пример 8

В данном примере создается эффект отскока при опускании элементов описания сверху.

View-eighth .mask { background-color: rgba(255, 255, 255, 0.7); top: -200px; opacity: 0; transition: all 0.3s ease-out 0.5s; } .view-eighth h2{ transform: translateY(-200px); transition: all 0.2s ease-in-out 0.1s; } .view-eighth p { color: #333; transform: translateY(-200px); transition: all 0.2s ease-in-out 0.2s; } .view-eighth a.info { transform: translateY(-200px); transition: all 0.2s ease-in-out 0.3s; }

Мы добавляем анимацию к элементу mask и определяем задержи для элеменетов описания:

View-eighth:hover .mask { opacity: 1; top: 0px; transition-delay: 0s; animation: bounceY 0.9s linear; } .view-eighth:hover h2 { transform: translateY(0px); transition-delay: 0.4s; } .view-eighth:hover p { transform: translateY(0px); transition-delay: 0.2s; } .view-eighth:hover a.info { transform: translateY(0px); transition-delay: 0s; }

Для создания эффекта отскока используется функция translateY и несколько фреймов:

@keyframes bounceY { 0% { transform: translateY(-205px);} 40% { transform: translateY(-100px);} 65% { transform: translateY(-52px);} 82% { transform: translateY(-25px);} 92% { transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} }

Пример 9

В данном примере мы используем два элемента маски для создания эффекта закрывающихся штор:

Стиль #9

Описаниеt

Кнопка

Две маски имеют различные параметры для трансформаций. Также они выравнены по-разному.

View-ninth .mask-1, .view-ninth .mask-2{ background-color: rgba(0,0,0,0.5); height: 361px; width: 361px; background: rgba(119,0,36,0.5); opacity: 1; transition: all 0.3s ease-in-out 0.6s; } .view-ninth .mask-1 { left: auto; right: 0px; transform: rotate(56.5deg) translateX(-180px); transform-origin: 100% 0%; } .view-ninth .mask-2 { top: auto; bottom: 0px; transform: rotate(56.5deg) translateX(180px); transform-origin: 0% 100%; }

View-ninth .content{ background: rgba(0,0,0,0.9); height: 0px; opacity: 0.5; width: 361px; overflow: hidden; transform: rotate(-33.5deg) translate(-112px,166px); transform-origin: 0% 100%; transition: all 0.4s ease-in-out 0.3s; } .view-ninth h2{ background: transparent; margin-top: 5px; border-bottom: 1px solid rgba(255,255,255,0.2); } .view-ninth a.info{ display: none; }

При наведении курсора мыши появляется содержание из границы соприкосновения масок:

View-ninth:hover .content{ height: 120px; width: 300px; opacity: 0.9; top: 40px; transform: rotate(0deg) translate(0px,0px); } .view-ninth:hover .mask-1, .view-ninth:hover .mask-2{ transition-delay: 0s; } .view-ninth:hover .mask-1{ transform: rotate(56.5deg) translateX(1px); } .view-ninth:hover .mask-2 { transform: rotate(56.5deg) translateX(-1px); }

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

Пример 10

В последнем пример используется увеличение изображения с одновременным изменением прозрачности, а содержание увеличивается до нормальных размеров.

View-tenth img { transform: scaleY(1); transition: all 0.7s ease-in-out; } .view-tenth .mask { background-color: rgba(255, 231, 179, 0.3); transition: all 0.5s linear; opacity: 0; } .view-tenth h2{ border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .view-tenth p { color: #333; opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; }

При наведении курсора просто изменяется масштаб изображения и прозрачность:

View-tenth:hover img { transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info{ transform: scale(1); opacity: 1; }

Заключение

CSS3 имеет огромный потенциал для создания различных визуальных эффектов. Вероятно, что вскоре мы сможем отказаться от использования JavaScript для простых эффектов.

На этом уроке мы сделаем меню с красивым эффектом при наведении с использованием псевдоэлементов - :after и :before . Что такое псевдоэлементы, мы очень подробно разбирали .

В итоге мы должны получить следующее:

Сделаем HTML заготовку из простого списка с ссылками внутри.

Квартиры

Дома

Дачи

Участки

Гаражи

По умолчанию меню прижато к верхнему левому углу окна браузера. В файле стилей спозиционируем от этого угла на 20% от верхнего края и на 30% от левого края окна браузера, уберем маркеры и отобразим пункты меню горизонтально.

Ul {
position: absolute;
top: 20%;
left: 30%;
list-style: none;
display: flex;
}

На данном этапе пункты меню прижаты друг к другу, надо между ними создать пространство.

Делается это с помощью свойства padding и margin с неким числовым значением, которые не работает у строчных элементов, таких как гиперссылка. Поэтому пункты меню должны стать блочными и тогда можно применять к ним padding и margin . Эффект при наведении должен происходить плавно, пропишем свойство transition с задержкой в полсекунды.

Ul li a {
display: block;
padding: 10px 20px;
margin: 20px 0; /* Отступы для псевдоэлемента сверху и снизу от меню */
transition: .5s;
position: relative;
}

Заготовка в виде меню для демонстрации эффекта неведения , готова. А теперь приступим к самому эффекту. Пока наше меню выглядит так:

А, чтобы оно было как на картинке, с двумя линиями, которые будут появляться при наведении

посмотрим на код ниже.

Ul li a:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 1px solid #44c09d;
border-bottom: 1px solid #44c09d;
transform: scaleY(2);
transition: .5s;
}

Почему мы не можем просто нарисовать эти линии в HTML -разметке, а затем их спрятать? Думаю, что неопытный верстальщик так и сделал бы. Но мы будем учиться все делать правильно. Зачем загромождать HTML -страницу лишним кодом, когда существует псевдоэлемент before ? До меню (before ), мы получили две линии, за счет однопиксельных бордюров и для жирности увеличили их в 2 раза.

Теперь спрячем эти линии, сделав их прозрачными, чтобы при наведении они плавно появлялись.

Ul li a:before {
opacity: 0;
}

Получается, что мы прописываем стили для псевдокласса hover псевдоэлемента before , звучит забавно.

Ul li a:hover:before {
transform: scaleY(1.2); /* Масштабирование уменьшение */
opacity: 1;
}

Теперь копируем код с before и меняем это слово на after . Убираем из кода свойство opacity , меняем значение у transform и прописываем background .

Ul li a:after {
transition: .5s; /* Плавный переход */
background: #44c09d;
}

Ul li a:hover:after {
transform: scale(1);
}

Теперь при наведении на пункты меню, появляются прямоугольники того же цвета, все сливается. Пропишем цвет у пунктов меню - белым при hover эффекте .

Ul li a:hover {
color: #fff;
}

И добавим к обоим псевдоэлементам before и after порядок наложения слоев, чтобы этот слой был ниже слоя с hover псевдоклассом и тогда эффект будет виден.

Z-index: -1;

Посмотреть, как работает этот эффект при наведении , вы можете на

демо странице .

Код hover эффекта целиком:

Для тех, кто только начал изучать HTML5 и CSS3 , будет полезным пройти .