Hover — эффекты при наведении
Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.
Горизонтальная заполнение
Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.
Чтобы достичь такого результата, нужно использовать псевдо-элемент :before:
button:before
Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Зададим ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:
button:hover:before
Вертикальное заполнение
Если анимировать высоту, то заполнение произойдёт сверху.
button:before < content:''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: rgba(255,255,255,0.3); border-radius: 5px; transition: all 2s ease; >button:hover:before
Инвертирование цвета
Инвертируем цвет внутри кнопки и добавляем границу:
button:hover
Пунктирная граница
Добавим границу у кнопки и инвертируем цвета:
button < border: 3px solid #3a7999; >button:hover
Появление значка
При наведении значок плавно появиться слева от текста.
Подключим шрифт со значками Font Awesome.
Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:
button
Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:
button:before
Осталось установить свойство left:
button:hover:before
Купи что-нибудь
Эффект подпрыгивания
Для данной анимации установим несколько ключевых кадров (keyframes):
@keyframes bounce < 0%, 20%, 60%, 100% < transform: translateY(0); transform: translateY(0); >40% < transform: translateY(-20px); transform: translateY(-20px); >80% < transform: translateY(-10px); transform: translateY(-10px); >>
Подключаем созданную анимацию:
button:hover
Искажение
В CSS3 появилась возможность использовать искажения:
button:hover
3D-поворот
Самый сложный эффект. Используем поворот кнопки для отображения другого сообщения, которое мы добавим в псевдо-элемент after у нашей кнопки.
Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:
button
Установим правила для псевдо-элемента after:
button:after
Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:
button:hover
Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.
Плавная трансформация | CSS свойство transition
Псевдокласс :hover позволяет элементам быть менее статичными, изменяя их свойства при наведении мышки.
при наведении мышки
.blok < background: #808991; color: #FFF; cursor: pointer; >.blok:hoverпри наведении мышки
Благодаря свойству transition (w3.org) можно сделать плавный переход между состояниями элемента.
плавная смена цвета туда-обратно
.transitionплавная смена цвета туда-обратно
плавная смена при наведении на div
.transition2:hoverплавная смена при наведении на div
плавная смена, когда курсор выведен за пределы div
.transition3:not(:hover)плавная смена, когда курсор выведен за пределы div
сохранение положения :hover
.transition4 < transition: 0s 9999999s; >.transition4:hoverсохранение положения :hover
- all — все
- none — никто
width, background
cubic-bezier(.1, .9, .9, 1.5)
cubic-bezier(.1, .9, .9, .1)
cubic-bezier(.1, .9, .9, -1.5)
cubic-bezier(.1, -1.5, .1, 2.5)
steps(4, end)
steps(4, start)
плавная смена цвета CSS
плавная смена цвета CSS
Популярные сочетания transition с другими свойствами, например, opacity или transform
изменение ширины width
изменение ширины width
изменение прозрачности opacity
кручение CSS
увеличивавшие объекта CSS
смещение вниз CSS
div.blok6 < cursor: pointer; position: relative; text-align: center; >div.blok6:before < background-color: rgba(255, 255, 255, 0.2); border-radius: 10px; box-shadow: 0 0 10px #A0A9B1 inset; content: attr(data-title); font-family: Tahoma; font-size: 32px; height: 48px; line-height: 48px; opacity: 0; padding: 0 10px; position: absolute; right: 50px; top: 20px; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; >div.blok6:hover:before < right: 160px; opacity: 1; top: 140px; >div.blok6 img < width: 400px; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; >div.blok6:hover img < width: 500px; >div.blok6:after
100 комментариев:
Наташа, спасибо.
Применил кручение на картинки. NMitra Пожалуйста! Приятно, что записи имеют применение. Анонимный Наташа, БОЛЬШОЕ Вам спасибо. Отличный блог, многое искал и нашел как раз в вашем блоге. Что больше всего радует- это написание статей понятным языком. NMitra Такие слова очень радуют слух и мотивируют на новые статьи! Космо Мизраил Горыныч А вы случаем не встречались с Даной Домирани? О_О Тоже великая дизайнерша!) NMitra Спасибо за комплимент 🙂 Только до «великой» мне ещё далековато.
К сожалению, не встречалась. Космо Мизраил Горыныч ну почему же — вполне великая 😉
только вот последний пример дёргается как контуженый XD
очень порадовало свойство transform >_< не думал, что эти св-ва вместе так применять можно! ^_^ NMitra М-да. Выпивающие, да ещё и контуженные снеговики :) По-хорошему нужно применять либо увеличение картинки, либо выплывающий текст. Из-за того, что мышка попадает то на изображение, то на область текста и получается не очень хорошо.
Никак не соберусь написать статью про transform. Космо Мизраил Горыныч NMitra, попробуйте со снеговиками так: пусть будет div, и в классах что-то типа: div.block6:hover img < . >div.block6:hover img:after < . >NMitra Супер! Вы правы, спасибо! Сама же написала только статью — http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. 🙂 Космо Мизраил Горыныч да, вижу >_< ток если увести мышь, снеговики не будут плавно возвращать свой размер.
Аааааа, я понял, где мы лоханулись.
Вот смотрите тут:
div.blok6:hover img width: 500px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
>
Все транзишн нужно перенести в
div.blok6 img width: 400px;
>
Тогда они не будут контузиться 🙂 Космо Мизраил Горыныч Чёт я вас почитываю-почитываю, и мне приспичило вдруг создать свой блог!))))
Ссылко внизу будет 🙂
Тематика почти такая же, может быть, найдём друг у друга что-нибудь интересное 😉
Мож потом баннерами обменяемся?) NMitra Вот теперь красиво! Уважаю за такое внимание к деталям и желание «допилить» до идеала.
На самом деле мне приятно, что получается у читателей находить творческую нотку. Обращайся, помогу, чем смогу.
И, конечно, интересно взглянуть на ссылку 😉 Космо Мизраил Горыныч я на своём блоге попробую «проапгрейдить» снеговиков, так как мне тоже нужен этот эффект для моей галереи >_< результаты будут - дам ссылко :)
ну а вообще я цсс знаю практически вдоль и поперёк, только вот фантазии периодически не хватает 🙂
А вы Ява-Скрипт хоть немного знаете. NMitra Да, с фантазией у меня тоже туго, благо читатели всё время удивляют.
Очень немного и поверхностно. Ээээ. Из скрипта могу удалить ненужные фрагменты, тем самым настроив его под себя. С событием onclick недавно познакомилась.
Всё начинается с просьбы в комментарии и я лезу в дебри. А когда туда часто ходишь, дебри не кажутся такими уж ужасными.
Посмотри, плиз, выплывающую панель вместо футера — http://prilozhenie13.blogspot.com/. Она фиксированная. Вот здесь код — http://shpargalkablog.ru/2011/08/svoya-panel-navigatsii-blogger.html. Где-то с версткой намудрила, возможно с float: _left.
В Firefox нормально, в Хроме кнопка «последние» (в CSS #footer-dva) «плывёт». Добавляю position: absolute, ситуация меняется, теперь в Firefox наблюдается кривобразие. В IE гаджеты друг под другом.
Пока идеи отсутствуют. Космо Мизраил Горыныч ну я тоже в ява-скрипте ни бум-бум)))))
посмотрел ваш код.
короче, я в коде окончательно запутался %.% и сотворил свою панель. конструкция гораздо проще, эффект тот же самый 🙂
Этот казёл не даёт хтмл публиковать, видимо, создал на домашнем форуме для вас страничку: http://city.first-forum.com/h10-page
ну вы через огненную козявку код скопируете 🙂 NMitra В понедельник посмотрю, сейчас день семьи ))) NMitra Сделала, зацени — http://shpargalkablog.ru/2011/08/svoya-panel-navigatsii-blogger.html. VivaL Здравствуйте, спасибо за сайт, много полезной информации.
Вот такой вопрос у меня: можно ли сделать, чтобы эффект-«увеличивавшие объекта в два раза transform: scale(2)» запускался от клика мышкой.
Если можно, то в какую сторону копать?
Спасибо. NMitra Не ставила перед собой данной задачи. Я бы смотрела в сторону getElementById(»).style. Но сомневаюсь, браузеры используют префикс.
Или сделала что-то вроде
Или :target — http://shpargalkablog.ru/2012/02/psevdoklassy-css.html
Для картинок http://shpargalkablog.ru/2011/05/kak-uvelichit-izobrazhenie.html phenom Каким образом можно сделать задержку что бы рамка появлялась на элементе не мгновенно как сейчас,а через секунду например.Спасибо.
.td_men:hover,.catalog_men:hover
border-left:3px solid #f7941f;
border-top:3px solid #f7941f;
border-right:3px solid #f7941f;
border-bottom:3px solid white;
-moz-border-radius: 7px 7px 0px 0px;
-webkit-border-radius: 7px 7px 0px 0px;
background-color:white;
z-index:999999;
>
.td_men,.catalog_men
border-left:3px solid white;
border-top:3px solid white;
border-right:3px solid white;
border-bottom:0px solid white;
-moz-border-radius: 7px 7px 0px 0px;
-webkit-border-radius: 7px 7px 0px 0px;
background-color:white;
> NMitra .td_men:hover,.catalog_men:hover
-moz-transition: all 1s 1s; -webkit-transition: all 1s 1s; -o-transition: all 1s 1s;
> Анонимный Все никак не мог найти время на изучение transition&transform, а ларчик-то просто открывался. Спасибо за доступную статью 🙂 NMitra Пожалуйста, приходите ещё 🙂 Андрей Столько интересного и в одном месте ))
Хочется применить подобные фишки для своих сайтов, только банер сделать, чтоб не через IE заходили. NMitra Пусть заходят, эффекта постепенного изменения они не увидят, но всё будет функционировать как при :hover Den А как быть, если у блока не сплошной цвет, а градиент и его надо плавно перевести в другие цвета градиента? NMitra Увы, не все свойства реализуются (см. http://dev.w3.org/csswg/css3-transitions/#properties-from-css- ) Анонимный Спасибо большое. NMitra Рада помочь! Сергей Хамзин Постоянно стараюсь не использовать яваскрипты на страницах своих сайтов и постоянно убеждаюсь что и на css можно реализовать много интересных вещей.
Автор вы лучший сколько разбираюсь с css ни где ещё не видел такого подробного описания с нормальными понятными примерами
5 балов NMitra Спасибо, Сергей! Приятно осознавать, что твои труды оценены! купить кулер вот отличненько! спасибо! сейчас наведу красоту у себя ))) Анонимный Отличная статья, спасибо! NMitra Рада быть полезной! Сергей Хамзин Уважаемые подскажите что делать с IE 6-7-8 они сильно туповатые и всё режут на корню все усилия и старания
уже даже на костыль согласен из яваскрипта, если кто имеет опыт поделитесь кому не жалко. NMitra Посмотрите тут http://stackoverflow.com/questions/6544162/imitate-css3-transition-in-ie Анонимный Добрый.
Подскажите плз, как связать transition с height:auto ?
по существу оно работает, разворачивает на высоту элемента, но без замедления, как буд-то 0s стоит время. NMitra Добрый! Ничего не получиться, таковы условия w3.org http://dev.w3.org/csswg/css-transitions/#properties-from-css-
Нужно, чтобы оба значения были указаны или в процентах или в величинах, например px. Есть ещё calc. Анонимный Спасибо большое за ответ!
В процентах таже картина, разворачивается, но без задержки.
А не подскажите может какойнить другой способ?
Нужно, чтоб при длинном тексте, часть теста скрывалась (видимая часть должна быть одинаковой), а при наведении курсора раскрывалась, но только на размер элемента (текста)
Спасибо. NMitra Смотрите в сторону позиционирования. Вам нужно показать поверх всего содержания текст или чтобы развёрнутый текст сдвигал остальной контент? Анонимный Пока сдвигает контент, но я не против, смотрится нормально, хочется пока чтоб показывало (разворачивало) только по размеру текста NMitra Ваш вопрос поняла, подумаю до конца недели, может завтра что и напридумаю. Анонимный Буду премного благодарен.
Спасибо за отзывчивость. NMitra Посмотрела, подумала. Разворачиваться плавно не будет. Можно другой какой-нибудь эффект или задать фиксированное значение или JavaScript
#blok opacity: .5;
transition: 1s;
height:30px;
>
#blok:hover opacity: 1;
height:auto;
> Анонимный Спасибо за попытку 🙁
фикисированную и оставлю пока, раз все так сложно.
А по поводу других эффектов, какие есть варианты?
. хотя, думаю самый оптимальный и симпотичный вариант это разворачивание.
Спасибо! Виталий Вот кстати сам ресурс:
http://shopping.mk.ua/catalog/grupa/69
. эт по поводу разворачивания. оцените, нормально? Виталий Чуток ошибся, вот:
http://shopping.mk.ua/catalog/grupa/69 NMitra Нормально, как добились?
Хотя на мой взгляд абсолютно бессмысленная информация. Для меня как покупателя это просто набор цифр и букв. Особенно когда идёт полное повторение заголовка-ссылки. Виталий Добился как и было :), как и договаривались, постоянная высота блока, на высоту текста не получается 🙁
Повторение заголовков лишнее, попадается редко (долго редактировать), ну или когда нет описания, а так там обычно краткие характеристики, вроде так проще ориентироваться в отличиях. Анонимный Сергей.
Спасибо!, статья очень помогла!.
NMitra Пожалуйста, Сергей. Eduard Korotchuk Отличный материал. NMitra Благодарю 161leeroy а как сделать,чтоб цвет менялся два раза?например когда наводишь на ссылку,то она сначала загорается одним цветом ,а потом другим NMitra http://shpargalkablog.ru/2012/03/animaciya-css.html
Adilet Melisov Спасибо классная статья! Спасибо за труд и ваше время! если еще будут статьи готов с радостью прочитать и научиться ))) NMitra Добро пожаловать! seoronin Наталья, отличная подборка примеров! Только у тебя нашел, как высоту div’а сделать плавной 🙂 NMitra Высота блока не должна быть указана в процентах. Пример:
Частично решает проблему max-height. Анонимный Сайт просто шикарный! Все что нужно, мне полезное, нашел здесь! NMitra Благодарю за отзыв! Богдан Казан Полезная статья для новичков) Анонимный Спасибо Вам большое. На Вашем сайте, всегда столько интересного и с примерами интересными и всё подробно рассказано. Действительно, БОЛЬШОЕ ВАМ спасибо. NMitra Благодарю! Очень радостно для меня было читать ваши слова! Анонимный Здравствуйте!
У меня вопросик.
Вот игрался, экспериментировал. И получилось. Что эффект. Смещение вниз. Вниз и наверх. Всё прекрасно. А вот в право и лево не едет, а перескакивает. Не подскажите почему. И можно ли сделать по диагонали. Например, из угла вытащить на середину.
А сайт Ваш просто замечательная находка для меня. Столько интересного и всё в одном месте. Спасибо Вам большое!
NMitra Здравствуйте, нужно начальное положение (top: 0; left:0;) и конечное (top: 50px; left: 50px;) http://jsfiddle.net/NMitra/d5jcmhxe/ Анонимный Извините за беспокойство. Всё нарыл, всё додумал. Добавил к top: 0; right:0; или left:0; И hovere right:сколько хочу; или left: сколько хочу;
И всё поехало. Только да в ИЕ не хочет, будем думать.
Спасибо Вам за такой хороший сайт. С его помощью становлюсь умнее. Спасибо.
Анонимный Во, пока я строчил и Вы ответили. Спасибо Вам большое. Анонимный Бомбочка, пацаны! Анонимный Здравствуйте!
Скажите пожалуйста как в примере с увеличением ДИВа как у Вас здесь в 2 раза.
Как сделать что бы увеличивался толь в одну сторону. Например в право.
Или чтобы. С верху в низ то есть по высоте.
NMitra Здравствуйте, так?
transform: scale(2,1); Анонимный Спасибо Вам за ответ. Так тоже забавно и интересно, пригодится. Спасибо.
Но я хотел бы. Что бы например с права на лево. И правый край оставался на месте а двигался лишь левый край.
NMitra .transition-scale position: relative;
left: 0;
z-index: 2;
background: #808991;
color: #FFF;
margin: 0 auto;
padding: 10px;
text-align: center;
max-width: 500px;
font-size: 20px;
border: 4px ridge black;
cursor: pointer;
transition: 3s linear;
>
.transition-scale:hover transform: scale(2,1);
left: 262px;
> Анонимный Супер СПАСИБО Вам.
А это Вам забавная штучка. Посмотрите. Как обещал, нарою поделюсь. Спасибо.
P.S.
Блин, какая у Вас капча трудная. Еле можно пролезть .
Анонимный Забыл добавить. Штучку.
http://codepen.io/rileyjshaw/pen/LIwdc
NMitra Забавная штучка 🙂
От Гугла, прорываются только самые настойчивые 🙂 Без капчи, спама стало много. Анонимный Ой простите зашёл с не перезагруженной странице и вижу нету. Думал опять что не так сделал.
Извините.
Спам да. Но у Вас зверская.
Спасибо Вам ещё раз.
Андрей Фролов Добрый день.
Спасибо за вашу статью, очень интересна.
Скажите а можно ли сделать чтобы блок появлялся через несколько секунд сам, а не при наведении. NMitra Добрый день, можно с помощью анимации http://shpargalkablog.ru/2012/03/animaciya-css.html
Пример: http://shpargalkablog.ru/2013/06/popup.html Андрей Фролов Спасибо большое. буду изучать. va0816 некоторые простые анимации можно сделать без animation
Например можно сделать такую неоновую рамку: http://jsfiddle.net/x8v6wvt5/ NMitra setInterval — это и есть анимация, только в JavaScript. Или я не поняла вас? Анонимный А как сделать что бы фон менялся плавно туда сюда у дива без ховера? NMitra С помощью animation
Как здесь http://shpargalkablog.ru/2013/12/blink-text.html только с фоном
Подробнее http://shpargalkablog.ru/2012/03/animaciya-css.html Анонимный Да, но где выставлять стартовый фон, а где финальный? Просто если поставить диву какой либо бэкграунд в стилях, он патом не меняется Анонимный А все понял, вместо колор нужно прописать background) NMitra «патом» неправильно писать, нужно «потом».
Извините за замечание, аж глаз режет. Анонимный хорошо, сам не заметил) Анонимный А подскажите пожалуйста, возможно ли совместить две анимации, первая — это когда меняется фон у круга, скажем два-три раза, а затем идет от него box-shadow (похоже как разводы на воде от упавшего в нее камня), причем когда начинается эффект box-shadow фон в круге уже не меняется и затем анимация начинается заново, такое возможно? может есть какие то команды дополнительные что бы регулировать анимацию, был бы очень признателен за совет. Вот пример двух анимаций, о возможности совмещения которых я говорю:
#uptocall border-radius: 50%;
width:110px;
height:110px;
animation: uptocall 1.5s linear infinite;>
#uptocall border-radius: 50%;
width:110px;
height:110px;
animation: uptocall 1.5s linear infinite;>
#uptocall animation: uptocall 1.5s linear 3 forwards, uptocall1 1.5s 4.5s linear infinite;
> NMitra Или так http://jsfiddle.net/NMitra/07Lqsvrk/1/ ?
#uptocall animation: 10s linear infinite;
animation-name: uptocall, uptocall1;
> Neon Rain Скажите, а как здесь выставить, что бы это все патом повторялось и делается ли бордер небольшой в тенях на конце разводов второй анимации, т.е. вся тень одного тона светлого более длинная, но на конце бордер скажем 1px ? Если Вам не трудно и это подсказать) Такие эффекты я в ЦСС не использовал так широко, трудно еще по началу без хороших советов, но разобраться необходимо.
Кто знает как сделать анимацию по типу :hover но при отведении мыши?
На хосинг залил сайт для наглядности antonvolkov6666.000webhostapp.com .
Вообщем есть плавная анимация при наведении , нужно сделать так чтобы при сведении мыши с эллемента была не резкая , а такая же плавная анимация. Есть ли псевдо класс при сведении мыши или придётся писать на js
И еще вопрос можно ли сделать именно в css так чтобы при взаимодействии с одним эллементом менялся другой?
--> test Здесь должна быть ваша реклама - Вопрос задан более трёх лет назад
- 2655 просмотров
Анимация кнопок при наведении
В прошлом уроке мы разобрали, как изменить стиль кнопки при наведении на неё курсора мыши. Для этой цели применяется псевдокласс :hover, а чтобы изменения происходили плавно, добавляется свойство transition, которое устанавливает время перехода.
Вот, к примеру, как в течение полсекунды поменять цвет фона кнопки с синего на красный.
button < background-color: blue; transition: 0.5s; >button:hover
Использование transition
Свойство transition достаточно гибкое и позволяет устанавливать: время перехода для каждого свойства отдельно; время задержки перед выполнением перехода; функцию времени, согласно которой происходит изменение.
Так, если понадобится задать разное время перехода для цвета фона и рамки, пишем следующее, разделяя параметры запятой:
transition: background-color 1s, border-color 0.5s;В таком случае цвет фона будет меняться в течение одной секунды, а цвет рамки в течение полсекунды.
Если требуется сделать задержку перед началом изменения, то добавляем в конец ещё время:
transition: background-color 1s 0.5s;Здесь при наведении на кнопку полсекунды ничего не происходит, а затем цвет фона меняется в течение одной секунды.
Рассмотрим добавление к кнопке рамки, сделанной через box-shadow. Да, это свойство добавляет тень, но вполне универсально, чтобы применяться, в том числе, и для формирования рамок у кнопок. Здесь используется две тени, одна поверх другой, что, в итоге, даёт зелёную рамку на некотором удалении от кнопки.
box-shadow: 0 0 0 2px #fff, /* Белая тень */ 0 0 0 4px #3f8a7c; /* Зелёная тень */У кнопки при наведении будем менять цвет фона и после небольшой задержки показывать рамку. Для этого в transition запишем следующее:
transition: background-color 0.4s, box-shadow 0.2s 0.3s;Окончательный код показан в примере 1.
Пример 1. Использование transition
Использование animation
Свойство transition имеет своё определённую роль и с его помощью нельзя сделать сложную анимацию элемента. Для этой цели предназначено свойство animation, работающее совместно с правилом @keyframes.
Сперва нашей анимации следует дать уникальное имя, пусть будет flip :
@keyframes flip
Теперь определяемся с ключевыми кадрами, которые задаются в процентах. Например, для вращения элемента нам понадобится два положения:
- 0% — исходное положение элемента;
- 50% — элемент повёрнут на 180°.
Конечное значение 100% в данном случае можно не указывать, поскольку оно совпадает с начальным.
@keyframes flip < 0% <>50% <> >Для вращения элемента используем свойство transform с функцией rotateX().
@keyframes flip < 0% < transform: rotateX(0); >50% < transform: rotateX(180deg); >>Теперь эту анимацию можно привязать к кнопке, добавив свойство animation к псевдоклассу :hover .
button:hover < animation: flip 1s; /* Название и время анимации */ >Саму анимацию можно воспроизвести несколько раз, добавив число повторений в конец набора значений:
animation: flip 1s 3; /* Повторяем три раза */Или сделать анимацию бесконечной с помощью ключевого слова infinite .
animation: flip 1s infinite; /* Бесконечная анимация */В примере 2 при наведении курсора мыши на кнопку она поворачивается один раз вокруг горизонтальной оси.
Пример 2. Использование @keyframes
Использование сторонних библиотек
Существуют готовые сторонние библиотеки CSS, предлагающие наборы различных анимаций. Принцип работы у них схожий — сперва подключается дополнительный CSS-файл, затем в своём стиле указывается желаемое имя анимации или к самому элементу добавляется определённый стилевой класс. Анимировать подобным образом можно не только кнопки, но и другие элементы — ссылки, изображения и т. д.
Ниже рассмотрим пару популярных библиотек.
Animate.css
Эту библиотеку можно установить через npm, Yarn или добавить напрямую через CDN:
После чего на сайте выбираем понравившуюся анимацию и вставляем её имя в свойство animation . Обязательно следует добавить и продолжительность самой анимации:
animation: shakeX 1s;В примере 3 при наведении курсора на заблокированную кнопку она трясётся по горизонтали. Для анимации не всех кнопок, а только с атрибутом disabled , используем комбинацию псевдоклассов :disabled:hover .
Пример 3. Использование библиотеки Animate.css
Hover.css
Эта библиотека содержит набор разных эффектов с анимацией, иконками, тенями, уголками и рамками. Сама библиотека устанавливается через npm, Bower или скачивается напрямую с сайта GitHub. После этого подключается как обычный CSS-файл:
Эффекты для элемента работают путём добавления соответствующего класса к элементу. Все классы Hover.css начинаются с префикса hvr-, после чего идёт имя эффекта. К примеру, для создания пульсирующей кнопки при наведении, указываем класс hvr-pulse :
В примере 4 при наведении курсора мыши на кнопку она поднимается вверх и под кнопкой добавляется тень.
Пример 4. Использование библиотеки Hover.css
Итого
- Для плавного изменения значений стилевых свойств при наведении на кнопку курсора мыши используется свойство transition.
- Сложная анимация делается с помощью ключевых кадров через правило @keyframes.
- Сама анимация применяется к кнопке через псевдокласс :hover и свойство animation.
- Готовые стилевые библиотеки для анимации позволяют упростить создание эффектов для кнопок.
Автор: Влад Мержевич
Последнее изменение: 13.06.2023
Создайте кнопку, чтобы при наведении на неё курсора мыши у неё плавно появлялась тень, как показано на рис. 1.
Создайте кнопку, чтобы при наведении на неё курсора мыши вокруг кнопки плавно появлялся контур (рис. 1).
Создайте кнопку, чтобы при наведении на неё курсора мыши внутри кнопки плавно появлялась рамка (рис. 1).
См. также
- :focus на мобильных устройствах
- animation
- box-shadow
- transition
- Анимации в действии
- Анимация
- Анимация в CSS
- Анимация ссылок при наведении
- Всплывающая подсказка
- Добавление тени
- Добавление треугольника
- Множественные переходы
- Оформление кнопок
- Переходы
- Переходы в действии
- Переходы и анимация
- Переходы с помощью :hover
- Работа с типографикой
- Сочетание с псевдоклассами
- Тени у
- Трансформация в CSS
Рецепты
- Как изменить вид нажатой кнопки?
- Как плавно изменить цвет ссылки?
- Как сделать мигающий текст?