CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др. Оригинальные эффекты при наведении курсора мыши на объекты Подготовка к работе
В CSS3 предусмотрено очень много интересных эффектов. Данная статья посвящена эффектам анимации hover
В этой статье приведено 10 распространенных эффектов анимации на чистом CSS, которые украсят и освежат любой сайт. К тому же сделать их может любой новичок.
Ниже будут подробно рассмотрены следующие эффекты:
1. Крутящийся элемент
3. «Падающая» иконка
4. Выезжающая иконка
1. Крутящийся элемент
Хорошо подходит для маленьких элементов типа закрывающего крестика или стрелочки. На текстовые ссылки такое, конечно, вешать не надо.
Разметка здесь очень простая:
| 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)
Верстка здесь такая же, как в предыдущем примере:
| 1 | Х
|
А в 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 | .my-button { overflow : hidden ; display : inline-block; height : 35px ; line-height : 35px ; background : green ; padding : 0 10px ; color : white ; text-decoration : none ; font-family : arial; cursor : pointer ; } .icon-block { position : relative ; background : url () top left no-repeat ; width : 15px ; height : 15px ; display : block ; float : left ; margin : 7px 7px 0 0 ; } .my-button :hover .icon-block { -webkit-animation: anim 0.6s linear 0s 1 ; -moz-animation: anim 0.6s linear 0s 1 ; -o-animation: anim 0.6s linear 0s 1 ; animation: anim 0.6s linear 0s 1 ; } @-webkit-keyframes anim { 0% { top : 13px ; opacity: 1 } 30% { top : 5px ; opacity: 1 } 60% { top : 70px ; opacity: 1 } 70% { top : 70px ; opacity: 0 } 80% { top : -50px ; opacity: 0 } 100% { top : 13px ; opacity: 1 } } @-moz-keyframes anim { 0% { top : 13px ; opacity: 1 } 30% { top : 5px ; opacity: 1 } 60% { top : 70px ; opacity: 1 } 70% { top : 70px ; opacity: 0 } 80% { top : -50px ; opacity: 0 } 100% { top : 13px ; opacity: 1 } } @-o-keyframes anim { 0% { top : 13px ; opacity: 1 } 30% { top : 5px ; opacity: 1 } 60% { top : 70px ; opacity: 1 } 70% { top : 70px ; opacity: 0 } 80% { top : -50px ; opacity: 0 } 100% { top : 13px ; opacity: 1 } } @keyframes anim { 0% { top : 13px ; opacity: 1 } 30% { top : 5px ; opacity: 1 } 60% { top : 70px ; opacity: 1 } 70% { top : 70px ; opacity: 0 } 80% { top : -50px ; opacity: 0 } 100% { top : 13px ; opacity: 1 } } |
Как видно из примера, анимация происходит вследствие изменения значения 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 { overflow : hidden ; background : rgb (176 , 12 , 12 ) ; color : white ; height : 35px ; line-height : 35px ; width : 130px ; display : block ; text-align : center ; font-family : arial; font-size : 16px ; text-decoration : none ; position : relative ; -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; } .btn2 :before { content : "" ; background : url ("http://сайт/wp-content/uploads/phone.png" ) top left no-repeat ; width : 15px ; height : 15px ; display : inline-block; position : absolute ; top : 6px ; left : -20px ; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .btn2 :hover :before { left : 6px ; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .btn2 span { margin-left : 0 ; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .btn2 :hover span { margin-left : 10px ; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } |
Внешний элемент.btn2 должен иметь position: relative, так как блок с иконкой спозиционирован абсолютно. Также есть небольшая анимация margin на span с текстом внутри.btn2 (.btn2:hover span), которая отодвигает его при появлении иконки.
5. Выезжающая иконка как на CoolWebMasters
Анимация достигается за счет изменения background-position элемента. Нужно подготовить картинку с двумя состояниями иконки:
И верстка:
| 1 |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .btn3 { background-image : url ("http://сайт/wp-content/uploads/phone-i.jpg" ) ; background-position : 0 0 ; width : 40px ; height : 40px ; display : block ; -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; } .btn3 :hover { background-position : 40px 0 ; -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; } |
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.
| 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 95 96 97 98 99 100 101 102 103 104 | .btn6 :hover { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-transform-origin: center center ; -moz-transform-origin: center center ; -o-transform-origin: center center ; transform-origin: center center ; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0 , 0 , 1 , 15deg) ; } 40% { -webkit-transform: rotate3d(0 , 0 , 1 , -10deg) ; } 60% { -webkit-transform: rotate3d(0 , 0 , 1 , 5deg) ; } 80% { -webkit-transform: rotate3d(0 , 0 , 1 , -5deg) ; } 100% { -webkit-transform: rotate3d(0 , 0 , 1 , 0deg) ; } } @-moz-keyframes swing { 20% { -moz-transform: rotate3d(0 , 0 , 1 , 15deg) ; } 40% { -moz-transform: rotate3d(0 , 0 , 1 , -10deg) ; } 60% { -moz-transform: rotate3d(0 , 0 , 1 , 5deg) ; } 80% { -moz-transform: rotate3d(0 , 0 , 1 , -5deg) ; } 100% { -moz-transform: rotate3d(0 , 0 , 1 , 0deg) ; } } @-o-keyframes swing { 20% { -o-transform: rotate3d(0 , 0 , 1 , 15deg) ; } 40% { -o-transform: rotate3d(0 , 0 , 1 , -10deg) ; } 60% { -o-transform: rotate3d(0 , 0 , 1 , 5deg) ; } 80% { -o-transform: rotate3d(0 , 0 , 1 , -5deg) ; } 100% { -o-transform: rotate3d(0 , 0 , 1 , 0deg) ; } } @keyframes swing { 20% { transform: rotate3d(0 , 0 , 1 , 15deg) ; } 40% { transform: rotate3d(0 , 0 , 1 , -10deg) ; } 60% { transform: rotate3d(0 , 0 , 1 , 5deg) ; } 80% { transform: rotate3d(0 , 0 , 1 , -5deg) ; } 100% { transform: rotate3d(0 , 0 , 1 , 0deg) ; } } |
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% ) ; } |
Урок в котором мы научимся создавать интересные эффекты при наведении на изображения. Особенность заключается в использовании свойства border . Работать такие эффекты будут только в современных, поддерживающих css3 , браузерах.
HTML
Довольно простая структура.
Создаем родительскую оболочку с классом view
и контентом внутри. Затем создаем контейнер с классом mask
, где и будем применять css3
переходы получая эффекты при наведении. В некоторых примерах этот синтаксис немного изменится в зависимости от применяемого эффекта.
CSS
Здесь приведены основные свойства нашего урока. Для каждого эффекта будет свой css файл, вы же можете объединять различные эффекты в один css файл.
View { width: 300px; height: 200px; margin: 10px; float: left; border: 5px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 0px 0px 5px #aaa; cursor: default; } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; } .view img { display: block; position: relative; } .view a.info { background:url(../img/link.png) center no-repeat; display: inline-block; text-decoration: none; padding:0; text-indent:-9999px; width:20px; height:20px; }
Пример 1
HTML
Добавим класс effect к элементу с классом view для этого эффекта:
CSS
Чтобы уменьшить урок мы опустили в коде префиксы (-moz,-webkit
и др.), но все они есть в css
файлах эффектов.
В дополнении к свойству border
для создания треугольника, мы использовали многократные переходы, что позволило иметь больше контроля над свойствами во время анимации:
Effect img { opacity:1; transform:scale(1,1); transition: all 0.2s ease-in; } .effect .mask { opacity:0; overflow:visible; border-color:rgba(0,0,0,0.7) transparent transparent transparent; border-style:solid; border-width:150px; width:0; height:0; transform:translateY(-125px); transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out; } .effect a.info { opacity:0; transform:translateY(-125px); transition: transform 0.3s ease-in, opacity 0.1s ease-in-out; } .effect:hover img { opacity:0.7; transform:scale(2,2); } .effect:hover .mask { opacity: 1; transform: translateY(0px); } .effect:hover a.info { opacity:1; transform:translateY(100px); }
Пример 2
HTML
Синтаксис этого примера несколько отличается, обычно достаточно добавить специальный класс second-effect к элементу с классом view , но тут мы еще добавили ссылку внутри элемента с классом mask :
CSS
В этом примере мы собираемся работать с параметрами свойства border . Также реализовали box-sizing . Свойство box-sizing используется для изменения дефолтной box модели вычисляющей ширину и высоту элементов.
Second-effect .mask { opacity: 0; overflow:visible; border:0px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s ease-in-out; } .second-effect a.info { position:relative; top:-10px; opacity:0; transform:scale(0,0); transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; } .second-effect:hover .mask { opacity: 1; border:100px solid rgba(0,0,0,0.7); } .second-effect:hover a.info { opacity:1; transform:scale(1,1); transition-delay:0.3s; }
Пример 3
HTML
Добавим к классу view специальный класс third-effect для этого эффекта:
CSS
Как видно, то всего с помощью нескольких строк кода можно получить хороший эффект благодаря свойству border :
Third-effect .mask { opacity: 0; overflow:visible; border:100px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s ease-in-out; } .third-effect a.info { position:relative; top:-10px; /* Center the link */ opacity: 0; transition: opacity 0.5s 0s ease-in-out; } .third-effect:hover .mask { opacity: 1; border:100px solid rgba(0,0,0,0.7); } .third-effect:hover a.info { opacity:1; transition-delay: 0.3s; }
Пример 4
HTML
Разметка в этом примере короче по сравнению с предыдущими примерами, но получаемый эффект очень внушительный:
CSS
Используя только класс mask в комбинации со свойством border-radius получится довольно красивый эффект. Также использовали свойство visibility , которое позволяет в конце перехода получить кликабельное изображение.
Fourth-effect .mask { position:absolute; /* Center the mask */ top:50px; left:100px; cursor:pointer; border-radius: 50px; border-width: 50px; display: inline-block; height: 100px; width: 100px; border: 50px solid rgba(0, 0, 0, 0.7); box-sizing:border-box; opacity:1; visibility:visible; transform:scale(4); transition:all 0.3s ease-in-out; } .fourth-effect:hover .mask { opacity: 0; border:0px solid rgba(0,0,0,0.7); visibility:hidden; }
Пример 5
HTML
В этом последнем примере такой же синтаксис, как и в четвертом, отличия лишь в добавляемом классе fifth-effect вместо fourth-effect:
CSS
Также здесь мы использовали свойство border и visibility . Трюк заключается в изменении свойства border с solid на double :
Fifth-effect img { opacity:0.2; transition: all 0.3s ease-in; } .fifth-effect .mask { cursor:pointer; opacity:1; visibility:visible; border:100px solid rgba(0,0,0,0.7); box-sizing:border-box; transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620); } .fifth-effect:hover .mask { border:0px double rgba(0,0,0,0.7); opacity:0; visibility:hidden; } .fifth-effect:hover img { opacity:1; }
- Перевод
Мощь CSS3 огромна и в этом уроке вы сможете увидеть, как использовать его креативно. Мы собираемся создать несколько эффектов при наведении курсора мыши с помощью CSS3 transitions. При наведении курсора на эскиз будет показываться описание миниатюр, с использованием различных стилей в каждом примере.
Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
HTML-разметка
Структура разметки очень простая и интуитивно понятная. Создайте контейнер, который будет содержать изображение и любую другую информацию, такую как заголовок, описание и прочее.Внутри блока с классом view вставим элемент с классом mask, который будет отвечать за наши эффекты CSS3, внутри него мы и поместим название, описание и ссылку на полное изображение. (Для некоторых примеров, нам нужно будет добавить mask как отдельный элемент и обернуть описание в div с классом content.)
Title
Read MoreCSS
После создания разметки мы создадим наши стили.Мы установим общие правила для наших стилей, а затем мы будем добавлять специальные классы с желаемыми эффектами. В статье мы будем опускать 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
}
А теперь мы рассмотрим десять эффектов.
Пример 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; }
А теперь самое интересное в нашем эффекте. Когда мы перемещаем курсор над изображением, можно использовать свойство delay чтобы имитировать простую анимацию. transition-delay, который мы используем при наведении может быть изменен, чтобы отличаться от обычного класса. В этом примере мы не использовали какой-либо задержки в обычном классе, но мы добавили delay в hover, который будет немного задерживать эффект перехода.
.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 пустым и обернем описание в div с классом content.
Hover Style #2
Some description
Read MoreЗдесь класс mask будет иметь различные атрибуты, в частности мы собираемся применить свойство transform (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; }
Для нашего hover-эффекта мы используем translate-преобразование для того, чтобы перемещать наши элементы на место. mask также будет поворачиваться. Элементы описания будут двигаться с небольшой задержкой:
.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;
}
Это простые инструкции, которые будут применяться при наведении. Теперь мы будем переворачивать описание элементов, установив transition-delay соответственно:
.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 преобразованию. Мы установим transition-delay равным 0,2 для стилей изображения, но при наведении мы изменим его на 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 наряду с transition-timing-function 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
В этом примере мы сделаем описание появляющееся спереди, уменьшим изображение до исходного размера (scale c 10 до 1). Кнопка «read more» будет появляться снизу (translate).
.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
В этом примере мы будем использовать два элемента mask, чтобы сдвигать их с правого нижнего и с левого верхнего углов:
Hover Style #9
Read MoreЭлементы mask будут иметь различные значения translation и transfrom-origin. А также мы укажем что один выровнен по верхней границе, а другой по нижней:
.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; }
При наведении, мы сделаем так, что содержание будет появляться как бы из под двух, съезжающих в центр, элементов mask:
.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 для элементов mask таким образом, что, когда мы наводим курсор, переход происходит мгновенно, но при уходе мыши, задержка будет больше.
Пример 10
В последнем примере, мы будем увеличивать изображение, а затем прятать, перенося описание на передний план. Мы можем сделать это, используя шкалу преобразования (scale transform) и настраивая уровень прозрачности:
.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;
}
При наведении мы просто масштабируем изображение, а зачем прячем его, уменьшив его прозрачность до 0:
.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 для создания простых эффектов и полагаться на 100% на CSS, во всех браузерах.Я надеюсь, что вам понравились эти эксперименты, но прежде всего я надеюсь, что они смогут вдохновить вас на создание своих эффектов.
P.S. Данная статья является логическим продолжением статьи от Mary Lou
Теги: Добавить метки
| 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 анимации были полезными для вас. Желаем творческих успехов!
В данном видео разберем эффект анимированного затемнения картинки на чистом CSS .при наведении на блок с картинкой появляется текст, а задний фон с изображением затемняется.
В уроке задействуем:
- псевдоклассы :before и : after ;
- используем пересечение цветов при помощи mix-blend-mode: darken;
- для анимации воспользуемся transform и transition .
HTML структура кода
Делаем основной каркас блока с картинкой
Скачать архив с урока - Анимация при наведении
Скачивайте архив, распакуйте у себя на компьютере. В нем предварительный каркас html и css файлов, перекиньте их в свою среду разработки, откройте html файл и опишем в нем блок с картинкой.
Между тегами
Div.dws-wrapper>a>img+div.dws-text>h3+p
Жмем применить.
Вставим путь к картинке, и заполним alt .
май
21
,
2016
Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода - и у тебя уже развернулся бл
|
Шаг назад
ВОПРОС № 115 О каком событии предупреждают нашу цивилизацию, которое должно произойти, начиная с 15.11.17 г.?
На канале РЕН ТВ 16 июня 2017 г. был показан фильм «Застывшая тайна планеты» из серии «Самые шокирующие гипотезы», в котором сообщалос
|
Практически у каждого из нас есть такой грешок, как чрезмерное любопытство. Несмотря на то что мы доверяем близким нам людям, желание узнать больше о том, что творится в их голове, как на самом деле они к нам относятся, какие секреты хранят, заставляет ид
|
Разблокировка прошивки для Samsung Galaxy Pocket Neo GT-S5310
Samsung GT-S5310 прошивка Root + Unlock от сети Билайн
Для разлочки от оператора нам понадобится Компьютер и программы и драйвер:
3 . Скачиваем модифицированную рекавери - , зеркало , зеркало
|