В CSS3 предусмотрено очень много интересных эффектов. Данная статья посвящена эффектам анимации hover
В этой статье приведено 10 распространенных эффектов анимации на чистом CSS, которые украсят и освежат любой сайт. К тому же сделать их может любой новичок.
Ниже будут подробно рассмотрены следующие эффекты:
1. Крутящийся элемент
2. Дрожащий / дергающийся элемент (анимация Tada)
3. «Падающая» иконка
4. Выезжающая иконка
5. Выезжающая иконка как на CoolWebMasters
6. Кнопка с бликом
7. Кнопка с увеличивающимся внутренним border
8. Качающаяся кнопка (анимация Swing)
9. Двойной текст с использованием data-hover
10. Выезжающий текст снизу с использованием data-hover
1. Крутящийся элемент
Хорошо подходит для маленьких элементов типа закрывающего крестика или стрелочки. На текстовые ссылки такое, конечно, вешать не надо.
Пример:
Разметка здесь очень простая:
1 | <div class="my-el">Х</div> |
CSS:
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 | .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 | <div class="my-el2">Х</div> |
А в 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 | <a class="my-button"><span class="icon-block"></span>Текст кнопки</a> |
CSS:
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('http://ktvd.ru/wp-content/uploads/phone.png') 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 | <a class="btn2" href="#"><span>Текст кнопки</span></a> |
CSS:
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://ktvd.ru/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 | <a class="btn3" href="#"></a> |
CSS:
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://ktvd.ru/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 | <a href="#" class="btn4">Текст ссылки</a> |
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, которая и анимируется.
Верстка:
1 | <a href="#" class="btn5">Текст ссылки</a> |
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
А вот еще один интересный эффект, который подойдет к текстовым ссылкам на цветном фоне:
В верстке этого элемента добавился атрибут data-hover, который содержит текст, прилетающий при наведении.
1 | <a class="btn7" href="#" data-hover="Моя ссылка">Моя ссылка</a> |
В 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
Как и в предыдущем примере, при наведении выезжает надпись, дублирующая текст ссылки, интересно будут смотреться разноцветные надписи.
В верстке внутрь ссылки нужно вставить span.
1 | <a class="btn8" href="#"><span data-hover="Моя ссылка">Моя ссылка</span></a> |
СSS:
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%); } |
Классная подборка. Даже и не думала, что эти эффекты настолько доступны. Хороший у вас сайт. Сегодня наткнулась.
Отличная подборка. Прикольненько.