Hover css эффекты: CSS: Hover — эффекты при наведении

Содержание

33 css hover эффекта при наведении, о которых вы должны знать

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

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

Как следует из названия, это коллекция из 10 невероятно стильных эффектов наведения.

Когда вы наводите указатель мыши на различные элементы, CSS hover эффект при наведении следует за курсором и создает удивительные 3D презентации.

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

Если вы ищете круговые эффекты наведения, здесь вы найдете несколько интересных. В общей сложности доступно 12 различных CSS hover эффектов рамки.

Это еще один интересный эффект наведения. Он идеально подойдет для миниатюр или других типов изображений.

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

Еще один набор из 10 hover эффектов CSS для кнопок. Большинство из них довольно впечатляющие.

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

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

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

При наведении курсора мыши на изображение этот эффект выводит заголовки на фоне с низкой непрозрачностью.

Это еще один простой, но очень красивый CSS hover эффект при наведении. При наведении курсора мыши на изображение он выводит название и описание с помощью смарт-эффекта перелистывания.

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

Это невероятный CSS hover эффект рамки для изображений. Способ, с помощью которого одно изображение проявляется на фоне другого, невероятен!

При наведении курсора на изображение применяется уменьшение непрозрачности с фокусировкой на ссылке.

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

Исходный код

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

Исходный код

Подойдет для текста, кнопок или изображений. Постепенное воссоздание рамки — это действительно интересный эффект.

Исходный код

Вам нужен CSS hover эффект при наведении для панели поиска или иконки карты? Это именно он. Его бесшовные преобразования — сплошное удовольствие для глаз.

Исходный код

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

Исходный код

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

Исходный код

Идеальный CSS hover эффект при наведении для раздела «Связаться с нами«. Он отображает контактную информацию в раскрывающемся конверте, но только после того, как пользователь наведет курсор мыши на изображение.

Исходный код

Этот уникальный эффект наведения для кнопки «Вверх» позволяет предоставить посетителям красивый, анимированный указатель.

Исходный код

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

Этот hover эффект CSS добавляет к изображению красивые стили.

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

Этот CSS hover эффект при наведении воссоздает анимацию иконок Safari. Вы можете заменить значок собственным изображением или логотипом.

Это простой эффект наведения, который может быть применен и к кнопкам, и к изображениям. Легкая подсветка увеличит привлекательность изображений.

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

Это поистине уникальный CSS hover эффект рамки. При наведении курсора мыши он «кладет изображение на землю«.

Этот эффект изменяет фон при наведении курсора мыши на кнопку. Немного поэкспериментировав, можно легко реализовать его на своем сайте.

Это еще один CSS hover эффект при наведении, выделяющий путь перемещения курсора мыши. При наведении указателя он добавляет затемнение на изображения. И это затемнение следует за курсором.

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

Что вы думаете об описанных мною hover эффектах CSS? Какие из них понравились вам больше всего? Напишите об этом в комментариях.

Пожалуйста, опубликуйте свои мнения по текущей теме статьи. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!

Данная публикация является переводом статьи «30+ CSS3 Hover Effects You should be Familiar With» , подготовленная редакцией проекта.

33 hover-эффекта на CSS3, о которых следует знать каждому

Сегодня я хочу поделиться с вами подборкой, состоящей из 33 hover-эффектов, основанных на CSS3.

Как уже понятно из заголовка, здесь вы найдете коллекцию, состоящую из 10 невероятно стильных CSS эффектов:

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

Несмотря на то, что этот эффект можно по праву считать самым распространенным, он по-прежнему способен привлекать внимание:

Если вам нужны круговые эффекты на CSS3-коде, то вы попали в нужное место! Здесь их целых 12 штук!

Еще один интересный CSS эффект при наведении курсора, который позволит создать невероятно привлекательные миниатюры или украсить любые изображения:

Предлагаем вашему вниманию несколько эффектов при наведении на кнопки. Все они достаточно привлекательны, и идеально подойдут для сайтов любого типа:

Еще один набор, состоящий из 10 различных CSS3-эффектов. Большинство из них очень впечатляющие:

Данная коллекция включает в себя четыре различных эффекта при наведении на картинку CSS. Каждый эффект раскрывает заголовок и описание:

Забавный и интересный эффект при наведении курсора на изображения. Он хорошо подойдет для раздела отзывов или списка сотрудников с их фотографиями:

Эффект, выполненный в винтажном стиле, который точно напомнит вам о прошлом!

Несмотря на название, это непросто эффект. Он показывает заголовки и слегка изменяет уровень прозрачности при наведении курсора:

Еще один простой, но очень привлекательный CSS эффект. При наведении курсора мыши на изображение оно переворачивается, раскрывая пользователю заголовок и описание:

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

Должен признать, что это самый интересный CSS hover эффект при наведении. Просто невероятно, как одно изображение раскрывает другое!

Очень простой эффект, который все равно способен впечатлить. Наведение курсора на изображение приводит к незначительному изменению уровня прозрачности и смещению фокуса внимания на ссылку:

Возможно, это не самый практичный эффект, однако он точно забавный! Наведите курсор на солнцезащитные очки, и начнется магия!

Вам обязательно стоит опробовать каждый из них, так как все они помогут сделать изображения уникальными!

Этот уникальный hover CSS эффект отлично подойдет для текста, кнопок или картинок:

Не знаете, как украсить иконки поиска или карты? Тогда это решение для вас! Плавные трансформации будут приятны любому глазу:

Эффект отлично подойдет для скрытия кнопок социальных сетей, которые будут отображаться лишь при наведении курсора:

Этот CSS эффект поможет привлекательным образом отобразить дополнительную информацию о товарах в интернет-магазине:

Идеальный эффект при наведении для раздела контактов. Этот анимированный конверт отображает контактную информацию на развороте. Но происходит это только после наведения курсора:

Уникальный эффект при наведении, который позволяет заменить традиционную кнопку “Вверх” на анимированную:

Здесь представлено сразу два эффекта. Кроме увеличения картинки эффект также изменяет область отображения при наведении курсора на изображение:

Этот CSS эффект для сайта был разработан под вдохновением от видео, посвященного OS X Yosemite:

Еще один круглый эффект, применимый к круговым изображениям. Здесь представлено четыре различных hover-стиля:

Этот эффект представляет собой воссоздание анимации иконки браузера Safari. Можно без труда заменить иконку собственной картинкой или логотипом:

Этот простой CSS эффект можно применить как к кнопкам, так и к картинкам. Небольшое количество подсветки позволит представить картинки на странице в лучшем свете:

Если вы работаете над площадкой для размещения фотографий или картинок, то этот эффект может пригодиться. При наведении курсора изображение складывается в забавной манере, раскрывая при этом дополнительную информацию:

Интересный эффект, который можно применить к изображениям на сайте. Он как бы разглаживает изображение при наведении курсора:

Этот интересный CSS эффект при наведении позволяет изменять фон при наведении курсора на кнопку:

Еще один эффект при наведении, ориентированный на движение. Он позволяет слегка изменить уровень прозрачности изображения, как только на нем окажется курсор мыши:

Эти красивые hover CSS эффекты устроены довольно интересно. Настоящая анимация и масштабируемые SVG-картинки позволяют использовать подобные эффекты на сайтах любого типа:

Это, пожалуй, лучшие эффекты, созданные с помощью CSS3, которые мне удалось найти. Как они вам? Какие из них вы планируете использовать в собственных проектах? Напишите об этом в комментариях.

Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, отклики, лайки, дизлайки, подписки огромное вам спасибо!

Данная публикация является переводом статьи «30+ CSS3 Hover Effects You should be Familiar With» , подготовленная редакцией проекта.

Оригинальные hover-эффекты для изображений на чистом CSS3 – Dobrovoimaster

Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3.
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.

Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

Дабы не ломать общую картину, не стал коверкать машинным переводом названия эффектов(за исключением некоторых), оставил оригиналы заголовков такими, как их обозвал разработчик.
 

Hover Effect Ideas

Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.
 


 

iHover

iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.

 


 

Caption Hover Effects

Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.
 


 

Эффект перехода CSS3

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


 

Hover-эффекты для миниатюр на CSS3

Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.
 


 

Circle Hover Effects

Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.
 


 

Вращение миниатюр при наведении

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


 

Sexy Image Hover Effects

Если перевести дословно:”Сексуальный эффект при наведении на изображения“. Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.
 


 

5 Hover-эффектов на CSS3

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


 

Анимация подписей изображений

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


 

Hover-эффекты с элементами анимации

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


 

Изменение яркости картинок

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


 

10 Image Hover Effects

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.
 


 

Border Animation Effect

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


 

Original Hover Effects With CSS3

Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.
 


 

Shape Hover Effect

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


 

Раздвижные изображения

Суть данного эффекта в том, что изображение раздвигается вверх и вниз для появления подписи. Если поработать с параметрами стилей, думаю можно добиться вполне-себе симпатичных эффектов, а по умолчанию, выглядит всё совсем уж просто.
 


 

Slick CSS3 Animated Image

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


 

Всплывающая подпись при наведении

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.
 


 

Диагональное появление подписи

Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.
 


 

Анимированные заголовки миниатюр

Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.
 


 

Подчёркнутые или очерченные подписи к миниатюрам

Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.
 


 

Причудливые формы и zoom-эффект

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


 

Слайд-эффект для подписей изображений

Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.
 


 

6 Подписей к картинкам

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


 
Ну и наконец, напоследок так сказать, не могу не упомянуть о самом простейшем способе создания всплывающей подписи к миниатюре с помощью CSS3.
 

 
Об этом способе я рассказывал в одном из предыдущих своих уроков: Тынц.
 


 
Хотите приступить к работе над созданием сайта как можно быстрее? Теперь это абсолютно возможно! По той простой причине, что на маркетплейсе TemplateMonster появился новый раздел с HTML шаблонами на русском языке. Коллекция будет пополняться, но и сейчас уже можно присмотреть что-то подходящее для вашего онлайн-проекта. Все, что вам нужно сделать — это выбрать свое идеальное готовое решение и поработать с презентацией нужной информации. И не забывайте, что текст для шаблона был написан вручную.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Hover-эффекты для круглых элементов с использованием CSS Transitions

В сегодняшнем уроке мы будем экспериментировать с hover-эффектами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!

Пожалуйста, обратите внимание: результат этого урока будет работать, как задумано, только в браузерах, которые поддерживают соответствующие свойства CSS.

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

Итак, давайте начнем!

HTML

Для большинства примеров, мы будем использовать следующую структуру:

<ul>
    <li>
        <div>
            <div>
                <h4>Use what you have</h4>
                <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
            </div>
        </div>
    </li>
    <li>
        <div>
            <div>
                <h4>Common Causes of Stains</h4>
                <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
            </div>
        </div>
    </li>
    <li>
        <div>
            <div>
                <h4>Pink Lightning</h4>
                <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
            </div>
        </div>
    </li>
</ul>

Хотя мы могли бы использовать изображения здесь, мы дадим себе немного больше свободы, и используем фоновые изображения вместо картинок. Мы определим их в классах, которые начинаются с "ch-img-". Кроме того, у нас будут блоки с описанием отдельных элементов, и их названием.

Теперь, давайте создадим некоторые hover-эффекты!

CSS

Давайте определим общие стили для списка и элементов списка:

.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
 
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}
 
.ch-grid:after {
    clear: both;
}
 
.ch-grid li {
    width: 220px;
    height: 220px;
    display: inline-block;
    margin: 20px;
}

Мы можем отцентрировать элемент списка, используя display: inline-block и определив свойство text-align.

Хак clearfix от Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/

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

Пример 1

В первом примере будем масштабировать описание, увеличивая его до размеров элемента, и мы также будем анимировать внутреннюю тень самого элемента. Итак, давайте определим положение элемента, тень для него и переход:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: default;
    box-shadow:
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

Мы определим два класса для элемента: один - это ch-item, а другой будет использоваться для определения фонового изображения:

 

.ch-img-1 {
    background-image: url(../images/1.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/2.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/3.jpg);
}

Описание элемента будет позиционироваться абсолютно, и мы зададим ему полупрозрачный фон, установив значение для RGBA. Его прозрачность будет равна 0, и мы будем уменьшать масштаб его также до 0:

.ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

Заголовок элемента будет иметь некоторые отступы и сглаженные тени для текста:

.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 45px 0 0 0;
    height: 140px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}

Тег P имеет непрозрачность равную 0 и переход (мы хотим, чтобы он появлялся при наведении курсора мыши, но с задержкой):

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}

Ссылка будет в верхнем регистре, и мы поменяем цвет при наведении на желтый:

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

А теперь, самое интересное, что будет происходить при наведении мыши!
Этот элемент будет анимирован, и его тень изменит радиус с 16px до 1px:

.ch-item:hover {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}

Описание будет плавно появляться и масштабироваться до 1:

.ch-item:hover .ch-info {
    transform: scale(1);
    opacity: 1;
}

Параграф будет просто появляться (с задержкой):

.ch-item:hover .ch-info p {
    opacity: 1;
}

С первым примером мы закончили! Давайте взглянем на следующий.

Пример 2

HTML структура в данном случае такая же, как и в первом примере.

Здесь мы будем использовать тень для элемента, чтобы заполнить наш круг и чтобы тень служила фоном для описания.
Итак, здесь нет ничего особенного, только тень имеет несколько строк значений:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow:
        inset 0 0 0 0 rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

Изображения для фона:

.ch-img-1 {
    background-image: url(../images/4.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/5.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/6.jpg);
}

Описание будет опять же спрятано:

.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
    backface-visibility: hidden;
}

Зададим стили для типографских элементов:

.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 65px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

При наведении мы анимируем внутреннюю тень элемента (она будет у нас красноватая) до 110px в радиусе. Она покроет весь круг:

.ch-item:hover {
    box-shadow:
        inset 0 0 0 110px rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.8),
        0 1px 2px rgba(0,0,0,0.1);
}

Мы увеличим описание, чтобы оно появилось:

.ch-item:hover .ch-info {
    opacity: 1;
    transform: scale(1);  
}

Пример 3

В этом примере мы поиграем с вращением. Структура будет немного отличаться от первых двух примеров, поскольку мы должны добавить второй блок для эскиза. Таким образом, элемент будет выглядеть следующим образом:

<li>
    <div>
        <div>
            <h4>Music poster</h4>
            <p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p>
        </div>
        <div></div>
    </div>
</li>

Блок элемента будет иметь такие же стили, как и раньше (с тонкой тенью):

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

Для эскиза определим свойство transform-origin и переходы. Это будет элемент, который мы хотим, чтобы он поворачивался вниз при наведении курсора мыши, и при этом раскрывал описание элементов:

.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
    transform-origin: 95% 40%;
    transition: all 0.3s ease-in-out;
}

С помощью псевдо-класса :after мы создадим небольшую медную защелку с радиальным градиентом:

.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

Давайте определим фоновые изображения для каждого элемента:

.ch-img-1 {
    background-image: url(../images/7.jpg);
    z-index: 12;
}
 
.ch-img-2 {
    background-image: url(../images/8.jpg);
    z-index: 11;
}
 
.ch-img-3 {
    background-image: url(../images/9.jpg);
    z-index: 10;
}

Описание элемента будет иметь следующие стили:

.ch-info {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

Типографские элементы стилизованны следующим образом:

.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 60px;
    padding: 22px 0 0 0;
    height: 85px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

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

.ch-info p a {
    display: block;
    color: #333;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 24px;
    margin: 7px auto 0;
    font-family: 'Open Sans', Arial, sans-serif;
    opacity: 0;
    transition:
        transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    transform: translateX(60px) rotate(90deg);
}
 
.ch-info p a:hover {
    background: rgba(255,255,255,0.5);
}

Так как мы хотим, чтобы движение и изменение прозрачности происходили с задержкой, но фон изменялся без неё, мы разделим переходы.

При наведении мы повернем эскиз и переместим/повернем ссылку:

.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
}

Пример 4

Четвертый пример будет включать в себя элементы 3D. Таким образом, нам нужно немного изменить структуру, чтобы иметь контейнер для перспективы и лицевую и обратную сторону. Таким образом, элемент списка будет выглядеть следующим образом:

<li>
    <div>              
        <div>
            <div>
                <div></div>
                <div>
                    <h4>Bears Type</h4>
                    <p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p>
                </div>  
            </div>
        </div>
    </div>
</li>

Как вы можете видеть, мы добавили фоновое изображение для блока элемента, а также лицевой части переворачивающегося элемента.
Трюк заключается в том, чтобы задать такой же фон для ch-info-wrap, как и на остальной странице. Это создаст иллюзию, что наш элемент имеет отверстие.

Этот элемент будет иметь обычные стили:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

Дополнительный блок будет использоваться для перспективы, и мы добавим ему переход для тени:

.ch-info-wrap{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    perspective: 800px;
    transition: all 0.4s ease-in-out;
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
 
}

Блок с классом ch-info будет иметь значение preserve-3d для transform-style, и мы зададим ему переход, так как этот элемент будет вращаться в 3D:

.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
    transform-style: preserve-3d;
}

Лицевая и обратная стороны будут иметь следующие стили:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    backface-visibility: hidden;
}

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

.ch-info .ch-info-back {
    transform: rotate3d(0,1,0,180deg);
    background: #000;
}

И снова, фоновые изображения:

.ch-img-1 {
    background-image: url(../images/10.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/11.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/12.jpg);
}

... и типографские элементы:

.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

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

.ch-item:hover .ch-info-wrap {
    box-shadow:
        0 0 0 0 rgba(255,255,255,0.8),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
 
.ch-item:hover .ch-info {
    transform: rotate3d(0,1,0,-180deg);
}

Пример 5

В этом примере мы хотим уменьшить внутреннюю часть эскиза до 0 и сделать, чтобы описание элементов появлялось и масштабировалось до 1.

Структура пятого примера будет такой же, как и в предыдущем примере.

Этот элемент имеет обычные стили:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

Враппер и блок с описанием будут иметь следующие общие стили:

.ch-info-wrap,
.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
}

Давайте еще раз используем трюк, как и в прошлом примере, и установим такой же фон для враппера, что и для страницы:

.ch-info-wrap {
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
 
}

Общие стили для "переднего" и "заднего" блока:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
}

«Передний» будет иметь переход (он будет уменьшаться и исчезать):

.ch-info .ch-info-front {
    transition: all 0.6s ease-in-out;
}

"Задний" блок, который содержит описание, будет иметь изначально прозрачность равную 0, а затем будет увеличиваться до 1.5:

.ch-info .ch-info-back {
    opacity: 0;
    background: #223e87;
    pointer-events: none;
    transform: scale(1.5);
    transition: all 0.4s ease-in-out 0.2s;
}

Фоновые изображения и типографские элементы будут иметь такие же стили как и в предыдущих примерах, только с несколькими разными цветами:

.ch-img-1 {
    background-image: url(../images/13.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/14.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/15.jpg);
}
 
.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 80px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px 0;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: #e7615e;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: #fff;
}

При наведении мы уменьшим внутреннюю часть эскиза до 0 и установим непрозрачность равную 0 для "переднего" блока.

.ch-item:hover .ch-info-front {
    transform: scale(0);
    opacity: 0;
}

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

.ch-item:hover .ch-info-back {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

Пример 6

В этом примере мы хотим перевернуть внутреннюю часть миниатюры вниз, для того, чтобы показать описание. HTML-код будет таким же, как и в предыдущих двух примерах.

Элемент будет иметь такие же стили, как и раньше:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

Общие стили для враппера и элемента с описанием:

.ch-info-wrap,
.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

Оболочка будет иметь перспективу:

.ch-info-wrap {
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
    perspective: 800px;
}

Элементу info установим следующие стили для трансформации:

.ch-info {
    transform-style: preserve-3d;
}

Передняя и задняя стороны будут иметь переход. Обратите внимание, что на этот раз мы не будем устанавливать backface-visibility: hidden, так как мы хотим показать обратную сторону внутренней части эскиза, когда она переворачивается вниз:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    transition: all 0.6s ease-in-out;
}

Давайте установим правильный transform-origin, так чтобы мы могли открыть его вниз:

.ch-info .ch-info-front {
    transform-origin: 50% 100%;
    z-index: 100;
    box-shadow:
        inset 2px 1px 4px rgba(0,0,0,0.1);
}

Мы установим RGBA значение с непрозрачностью равную 0 для фона элемента с описанием:

.ch-info .ch-info-back {
    background: rgba(230,132,107,0);
}

И обычные стили для других элементов:

.ch-img-1 {
    background-image: url(../images/16.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/17.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/18.jpg);
}
 
.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 25px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

При наведении, мы будем вращать переднюю часть и немного анимировать тень.

.ch-item:hover .ch-info-front {
    transform: rotate3d(1,0,0,-180deg);
    box-shadow:
        inset 0 0 5px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(0,0,0,0.3);
}
 
.ch-item:hover .ch-info-back {
    background: rgba(230,132,107,0.6);
}

Пример 7

Последний пример будет в виде вращающегося куба, где мы открываем описание, поворачивая его на бок. Так как мы будем вращать каждую из граней, нам не нужна дополнительная оболочка. Итак, наш HTML-код будет выглядеть следующим образом:

<li>
    <div>            
        <div>
            <div></div>
            <div>
                <h4>Mouse</h4>
                <p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p>
            </div>  
        </div>
    </div>
</li>

Мы определим для элемента свойство perspective:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    perspective: 900px;
}

Для элемента с классом ch-info понадобится preserve-3d:

.ch-info{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

Лицевая и обратная сторона будут иметь переходы, transform-origin будет установлен как 50% 0%:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    transition: all 0.4s linear;
    transform-origin: 50% 0%;
}

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

.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}

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

.ch-info .ch-info-back {
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}

Зададим обычные стили для фоновых изображений и текстовых элементов:

.ch-img-1 {
    background-image: url(../images/19.jpg);
}
 
.ch-img-2 {
    background-image: url(../images/20.jpg);
}
 
.ch-img-3 {
    background-image: url(../images/21.jpg);
}
 
.ch-info h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: 0 15px;
    padding: 60px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
 
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
 
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

Мы будем использовать translate3d, чтобы перемещать лицевую часть по оси Y нашего 3D пространства, и rotate3d, чтобы на самом деле повернуть её. Мы также постепенно её спрячем, чтобы какая-либо часть не была видна впоследствии:

.ch-item:hover .ch-info-front {
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}

Противоположная сторона будет поворачиваться "назад" до 0 градусов (первоначально она была повернута вниз):

.ch-item:hover .ch-info-back {
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}

И вот и всё!

Надеюсь, вам понравилось, и эти эффекты будут вам полезны!

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Потрясающие эффекты CSS3 при наведении

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
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
 
.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
 
.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
 
.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
 
.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}

Эффекты при наведении

5 ноября 2015 Антон Кулешов 4966 0

Здравствуйте дорогие читатели! Наступило время пополнить коллекцию сайта ещё 30-тью красивыми CSS эффектами при наведении курсора на картинку. Данная тема поистине очень обширна и мы не устаем пополнять нашу библиотеку все новыми и новыми эффектами.

3 августа 2015 Антон Кулешов 7509 0

Как оформить ссылку на сайте? Этот вопрос наверно один из самых простых, возникающих у веб-разработчика, тем более что до недавнего времени и вопроса, как такового и не было – редко кто менял даже стандартный набор цветов. Появление CSS3 внесло значительные изменения в «серые будни» и страницы «расцвели». Мы уже рассматривали ранее множество различных ховер эффектов, сегодняшняя же CSS библиотечка – заточена под ссылки, хотя, приведенные в ней эффекты легко можно применить и для других элементов страницы. Библиотека содержит следующие эффекты: ссылки при наведении вращаются, меняют перспективу, перестраивают бордеры, фиксируют взгляд, создают эффект куба, вызывают всплывающую подсказку, заключаются в скобки и много других причудливых выделений.

24 июня 2015 Антон Кулешов 3884 0

Продолжаем прокачивать дизайн наших страниц, и сегодня я хочу обратить ваше внимание на целую палитру красивых кнопок для сайта. «Правильно» расставленные кнопки – это душа продающего сайта, они должны привлекать внимание пользователя, чтобы он не смог покинуть страницу не нажав парочку из них. Маркетинг прочно впился в дизайнерскую часть и его не обойдешь стороной, если конечно вы не содержите захудалый сайт с парой-тройкой посетителей. Красивая и призывная кнопка для посетителя - как красная тряпка для быка, оно вроде ему и не надо, но манит чертовка.

21 мая 2015 Антон Кулешов 8232 0

Эффекты при клике не столь популярны как hover effects, однако, сегодня мой взор упал на плагин под названием waves.

1 апреля 2015 Антон Кулешов 4723 0

Продолжаем «наводить красоту» на наших сайтах, и сегодня поговорим о плагине под названием adipoli, при помощи которого можно создавать красивые hover effects.

21 февраля 2015 Антон Кулешов 3375 0

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

13 февраля 2015 Антон Кулешов 4056 0

Сегодня поговорим об «украшательствах» и рассмотрим довольно интересную анимацию при наведении на картинку (картинку беру как пример, в реальности эффект можно использовать на чем угодно), а также познакомимся с библиотекой MooTools.

Учебник CSS 3. Статья "Переходные эффекты в CSS"

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

Установка переходного эффекта

Прежде всего, давайте, разберемся, что из себя представляет переходный эффект. По большому счёту, переходный эффект представляет собой анимацию элемента (объекта), в которой элемент первоначально имеет один набор CSS свойств, а за определенный промежуток времени этот набор свойств изменяется.

Рис.161 Пример переходного эффекта в повседневной жизни.

Например, у нас есть элемент, у которого задан стиль, определяющий цвет заднего фона - розовый. Мы хотим создать плавный эффект перехода цвета заднего фона в синий. Что в нашем случае для этого необходимо?

1. Понять какое свойство нам необходимо изменить, в нашем случае это свойство background-color со значением pink:

.myElement {
background-color: pink; /* устанавливаем цвет заднего фона */
}

2. Определить каким будет конечный вид элемента, для нашего примера это элемент со свойством background-color, значение которого будет определять цвет синего цвета (например, в системе RGB - rgb(0,0,255)):

.myElement {
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона */
}

3. Какие у нас есть варианты, чтобы инициировать переход от одного цвета к другому? Как вариант мы можем воспользоваться псевдоклассом :hover, мы неоднократно рассматривали его в примерах этого учебника. Давайте создадим стили:

.myElement {
background-color: pink; /* устанавливаем цвет заднего фона */
}
.myElement:hover {
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}

Не кажется ли Вам, что мы, как кальсоновые гномы пропустили какую-то очень важную вещь в переходе от одного цвета к другому? Именно! У нас нет переходного эффекта при изменении CSS стилей элемента, и изменение цвета происходит мгновенно.

Длительность переходного эффекта

Настало время познакомиться с первым из пяти CSS свойств, которые нам позволят создавать и управлять переходными эффектами в ваших документах. Свойство transition-duration определяет, сколько секунд или миллисекунд эффект перехода занимает времени.

Обращаю Ваше внимание, что переходные эффекты были введены в стандарте CSS 3 и поддерживаются всеми современными браузерами:

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

Давайте рассмотрим пример, в котором изменение цвета будет сопровождаться переходным эффектом при наведении на элемент. Длительность переходного эффекта задается в числовой форме в секундах (s) или миллисекундах (ms). Одна секунда соответствует тысяче миллисекунд.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Длительность переходного эффекта при наведении</title>
<style>
div {
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */
width: 100px; /* ширина элемента */	
height: 100px; /* высота элемента */	
background-color: pink; /* устанавливаем цвет заднего фона */
margin-right: 25px; /* внешний отступ с правой стороны */	
text-align: center; /* выравнивание текста по центру */	
}
.test1:hover {
transition-duration: .5s; /* продолжительность переходного эффекта 0,5 секунд */	
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test2:hover {
transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */	
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент  */
}
.test3:hover {
transition-duration: 1.5s; /* продолжительность переходного эффекта 1,5 секунды */	
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test4:hover {
transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */	
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test5:hover {
transition-duration: 2.5s; /* продолжительность переходного эффекта 2,5 секунды */		
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
</style>
</head>
	<body>
		<div class = "test1">0.5s hover</div>
		<div class = "test2">1s hover</div>
		<div class = "test3">1.5s hover</div>
		<div class = "test4">2s hover</div>
		<div class = "test5">2.5s hover</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-duration мы установили различную длительность переходного эффекта для элементов <div> при наведении.

Результат нашего примера:

Рис.162 Пример переходного эффекта при наведении (длительность переходного эффекта установлена только на псевдокласс).

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


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


Давайте рассмотрим пример, в котором установим элементу отдельное значение свойства transition-duration равное 5 секундам:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Управление скоростью обратного переходного эффекта</title>
<style>
div {
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */
width: 100px; /* ширина элемента */	
height: 100px; /* высота элемента */	
background-color: pink; /* устанавливаем цвет заднего фона */
margin-right: 25px; /* внешний отступ с правой стороны */	
text-align: center; /* выравнивание текста по центру */	
transition-duration: 5s; /* продолжительность переходного эффекта 5 секунд */
}
.test1:hover {
transition-duration: .5s; /* продолжительность переходного эффекта 0,5 секунды */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test2:hover {
transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test3:hover {
transition-duration: 1.5s; /* продолжительность переходного эффекта 1,5 секунды */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test4:hover {
transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test5:hover {
transition-duration: 2.5s; /* продолжительность переходного эффекта 2,5 секунды */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
</style>
</head>
	<body>
		<div class = "test1">0.5s hover<br>5s element</div>
		<div class = "test2">1s hover<br>5s element</div>
		<div class = "test3">1.5s hover<br>5s element</div>
		<div class = "test4">2s hover<br>5s element</div>
		<div class = "test5">2.5s hover<br>5s element</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-duration мы установили различную длительность переходного эффекта для элементов <div> при наведении, и установили для самого элемента продолжительность переходного эффекта равного 5 секундам. Обратите внимание, что если переходный эффект не был закончен (указатель отведен раньше), то и обратный переходный эффект будет длиться пропорционально меньше.

Результат нашего примера:

Рис. 163 Управление скоростью обратного переходного эффекта.

Хорошо, теперь мы с Вами научились задавать длительность перехода как при наведении на элемент, так и устанавливать длительность возвращения этой анимации (перехода) обратно. Во многих случаях нам достаточно того, чтобы значения эффекта перехода между двумя состояниями были равны. Для этого нам достаточно установить значение свойства transition-duration только на сам элемент, что значительно сократит CSS код, рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Управление скоростью переходного эффекта</title>
<style>
div {
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */
width: 100px; /* ширина элемента */	
height: 100px; /* высота элемента */	
background-color: pink; /* устанавливаем цвет заднего фона */
margin-right: 25px; /* внешний отступ с правой стороны */	
text-align: center; /* выравнивание текста по центру */	
transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */
}
div:hover {
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "test1">2s element</div>
		<div class = "test2">2s element</div>
		<div class = "test3">2s element</div>
		<div class = "test4">2s element</div>
		<div class = "test5">2s element</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-duration мы установили одинаковую длительность переходного эффекта для элементов <div> как при наведении, так и при переходе к первоначальному состоянию.

Результат нашего примера:

Рис. 164 Управление скоростью переходного эффекта.

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

Переходный эффект для отдельных свойств

И так, приступим к изучению особенностей следующего свойства - transition-property, оно указывает имя свойства CSS для которого используется переходный эффект. По умолчанию все свойства получают эффект перехода (значение по умолчанию all). Вы можете как полностью убрать все свойства, подлежащие переходному эффекту установив значение свойства none, так и указать конкретное свойство, или свойства, перечисленные через запятую.

Кроме того, допускается указать для каждого отдельного свойства свою продолжительность переходного эффекта. Давайте рассмотрим эту особенность на следующем примере:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Указание длительности перехода для разных свойств</title>
<style>
div {
width: 200px; /* ширина элемента */			
height: 200px; /* высота элемента */	
font-size: 2em; /* размер шрифта */	
font-weight: bold; /* жирное начертание символов */	
text-align: center; /* выравниваем текст по центру */	
line-height: 200px; /* высота строки (выравниваем по высоте)*/
margin: 0 auto; /* выравниваем блок по горизонтали (внешними отступами)*/
color: green; /* цвет текста */
background-color: yellow; /* устанавливаем цвет заднего фона */
border: 3px solid #000; /* сплошная граница 3 пикселя черного цвета */
transition-duration: 2s, 4s, 6s; /* продолжительность переходного эффекта (для каждого свойства своя) */
transition-property: background-color, border-color, color; /* свойства, которые подлежат переходному эффекту */
}
div:hover {
background-color: #000; /* устанавливаем цвет заднего фона при наведении*/
color: red; /* устанавливаем цвет текста при наведении*/
border-color: red; /* устанавливаем цвет границ элемента при наведении*/
}
</style>
</head>
	<body>
		<div>My element</div>
	</body>
</html>

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

В этом примере с использованием CSS свойства transition-property мы установили свойства, которые подлежат переходному эффекту, а с использованием свойства transition-duration указали для них различную продолжительность.

Результат нашего примера:

Рис. 165 Указание длительности перехода для разных свойств.

Задержка перед переходным эффектом

Следующее CSS свойство - transition-delay определяет, когда эффект перехода начнется (выступает в роли задержки начала эффекта). То есть это свойство задерживает время начала переходного эффекта.


Время задержки указывается числом в секундах (s) или миллисекундах (ms). Значение по умолчанию составляет 0 секунд (отсутствие времени задержки).


По аналогии с предыдущими свойствами допускается указывать более одного значения задержки перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение задержки соответствует значению (в том же порядке), которое определено в свойстве transition-property.

Здесь есть нюанс, если список задержек меньше, чем количество значений (свойств), определённых свойством transition-property, то значения задержек эффекта перехода для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше задержек, чем значений, указанных в свойстве transition-property, то список задержек усекается до количества значений этого свойства.

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Задержка переходного эффекта</title>
<style>
body, html {
height: 100%; /* высота элементов */	
margin: 0; /* убираем внешние отступы */		
}
div {
width: 100px; /* ширина элемента */			 	
height: 50px; /* высота элемента */	
background-color: yellow; /* устанавливаем цвет заднего фона */
border: 1px solid #000; /* сплошная граница размером 1 пиксель черного цвета */	
transition-duration: 500ms, 800ms; /* продолжительность переходного эффекта */	
transition-property: width, height; /* свойства, которые подлежат переходному эффекту */
transition-delay: 500ms, 800ms; /* задержка для переходного эффекта (для каждого свойства своя) */
}
div:hover {
width: 50%; /* ширина элемента при наведении */	
height: 50%; /* высота элемента при наведении */	
}
</style>
</head>
	<body>
		<div>My element</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-delay мы установили задержку для переходного эффекта (для свойства width - 500 миллисекунд, а для свойства height - 800 миллисекунд).

Результат нашего примера:

Рис. 166 Пример задержки переходного эффекта.

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Выдвижная панель на CSS</title>
<style>
body, html {
height: 100%; /* высота элементов */	
margin: 0; /* убираем внешние отступы */		
position: relative; /* относительное позиционирование */	
}
div {
position: fixed; /* фиксированное позиционирование */	
top: 30px; /* отступ от верхнего края */
right: -135px; /* отрицательный отступ от правого края (прячем элемент за экран) */
width: 200px; /* ширина элемента */			 
height: 50px; /* высота элемента */
line-height: 50px; /* высота строки */
background-color: yellow; /* устанавливаем цвет заднего фона */
border: 1px solid #000; /* сплошная граница размером 1 пиксель черного цвета */
transition-delay: 2s; /* задержка переходного эффекта 2 секунды */
}
div:hover {
transition-delay: 0s; /* отсутствие задержки при наведении на элемент */
right: 0; /* отступ от правого края равен нулю */
}
</style>
</head>
	<body>
		<div>Hover Me -----Thank you!-----</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-delay мы установили задержку переходного эффекта при наведении (псевдокласс :hover) равную нулю, чтобы наша панель моментально выезжала, если бы мы этого не указали, то она бы получила задержку равную двум секундам, установленную для самого элемента. Благодаря этим действиям, пользователь быстро получает информацию при наведении, но даже если он уберет мышь с элемента наша выдвигающаяся панель будет полностью выдвинута еще в течении двух секунд.

Результат нашего примера:

Рис. 167 Пример задержки переходного эффекта.

Изменение скорости переходного эффекта

CSS свойство transition-timing-function используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую "разгона", так что скорость перехода может меняться в течение длительности эффекта перехода.


Хочу обратить Ваше внимание, что за продолжительность переходного эффекта отвечает свойство transition-duration, а это свойство не меняет продолжительность, а лишь регулирует скорость в различные промежутки этого эффекта, например, 70% времени переходного эффекта собирайся как девушка, а 30% беги на работу как проспал, в результате чего продолжительность одна, а скорость эффекта при этом различается.


Допускается указывать более одного значения функций перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение функции соответствует значению (в том же порядке), которое определено в свойстве transition-property. Если список функций меньше, чем количество значений (свойств), определённых свойством transition-property, то значения функций для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше функций, чем значений, указанных в свойстве transition-property, то список функций усекается до количества значений этого свойства.

Свойство transition-timing-function имеет большое количество различных значений, которые определяют скорость переходного эффекта. Предлагаю Вам вкратце пробежать по ним и перейти к примерам, чтобы наглядно увидеть результат:

ЗначениеОписание
easeЭффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25,0.1,0.25,1). Это значение по умолчанию.
linearОпределяет эффект перехода с одинаковой скоростью от начала до конца. Значение эквивалентно cubic-bezier(0,0,1,1). Точка 1 расположена на 0 по оси x и по оси y, точка 2 — на 1 по оси x и по оси y.
ease-inОпределяет эффект перехода с медленного старта. Значение эквивалентно cubic-bezier(0.42,0,1,1).
ease-outОпределяет эффект перехода с медленным окончанием. Значение эквивалентно cubic-bezier(0,0,0.58,1).
ease-in-outОпределяет эффект перехода с медленного старта и медленным окончанием (симметричная кривая Безье). Значение эквивалентно cubic-bezier(0.42,0,0.58,1). Точка 1 расположена на 0,42 по оси x и на 0 по оси y, точка 2 — на 0,58 по оси x и на 1 по оси y.
cubic-bezier(n,n,n,n)Определяет пользовательские значения в кубической функции Безье. Она допускает 4 числовых значения от 0 до 1 ( Первые два значения — координаты x и y первой точки, а вторые два значения — координаты x и y второй точки).
steps(int,start|end)Указывает пошаговую функцию, с двумя параметрами. Первый параметр задает число интервалов в функции (целое положительное число (больше 0)). Второй параметр является необязательным и имеет значения "start" или "end" и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр опущен, то присваивается значение "end". Значение "start" осуществляет переход в начале каждого шага, а "end" в конце каждого шага.
step-startЗначение эквивалентно steps(1, start). Свойство сразу принимает конечное значение. Значение свойства transition-duration (продолжительность перехода) игнорируется.
step-endЗначение эквивалентно steps(1, end). Свойство принимает конечное значение в конце шага (т.е. если имеется свойство transition-duration (продолжительность перехода), то оно выступит в роли задержки перехода).

Как правило, функция ease, при которой анимация начинается медленно, затем ускоряется и замедляется к концу (значение по умолчанию), или функция linear, которая определяет эффект перехода с одинаковой скоростью, подходит для большинства задач. Если Вам необходимо, что-то эдакое, то на этом ресурсе вы сможете подобрать оптимальные для Вашей фантазии значения функции.

Рассмотрим пример в котором сделаем выдвигающиеся панели для которых зададим различные математические функции, определяющие скорость переходного эффекта.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Скорость переходного эффекта в CSS</title>
<style>
div {
width: 100px; /* ширина элементов */	
height: 60px; /* высота элементов */	
background: khaki; /* устанавливаем цвет заднего фона */
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */ 
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */	
transition-duration: 1s; /* продолжительность переходного эффекта */}
div:hover {
height: 250px; /* высота элементов при наведении */	
background: Moccasin; /* устанавливаем цвет заднего фона при наведении */
}
.test {transition-timing-function: ease;} /* указываем значение функции перехода */	
.test2 {transition-timing-function: linear;} /* указываем значение функции перехода */	
.test3 {transition-timing-function: ease-in;} /* указываем значение функции перехода */	
.test4 {transition-timing-function: ease-out;} /* указываем значение функции перехода */	
.test5 {transition-timing-function: ease-in-out;} /* указываем значение функции перехода */	
.test6 {transition-timing-function: cubic-bezier(0.5,0.05,0.7,0.5);} /* указываем значение функции перехода */	
</style>
</head>
	<body>
		<div class = "test">ease</div>
		<div class = "test2">linear</div>
		<div class = "test3">ease-in</div>
		<div class = "test4">ease-out</div>
		<div class = "test5">ease-in-out</div>
		<div class = "test6">cubic-bezier</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-timing-function мы создали выдвигающиеся панели для которых задали различные математические функции, определяющие скорость переходного эффекта в различные промежутки времени.

Результат нашего примера:

Рис. 168 Скорость переходного эффекта в CSS.

Давайте рассмотрим пример использования пошаговых функций в CSS, используя свойство transition-timing-function:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Скорость переходного эффекта в CSS (пошаговые функции).</title>
<style>
div {
width: 100px; /* ширина элементов */	
height: 60px; /* высота элементов */	
background: khaki; /* устанавливаем цвет заднего фона */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */	
margin-bottom: 10px; /* внешний отступ снизу */
}
div:hover {
width: 550px; /* ширина элемента при наведении */
}
.test {
transition-duration: 3s; /* продолжительность переходного эффекта 3 секунды */	
transition-timing-function: steps(5, end);  /* указываем значение функции перехода (пошаговая функция) */
}
.test2 {
transition-duration: 3s; /* продолжительность переходного эффекта 3 секунды */
transition-timing-function: steps(5, start); /* указываем значение функции перехода (пошаговая функция) */
}
.test3 {
transition-timing-function: step-start; /* указываем значение функции перехода (пошаговая функция) */
}
.test4 {
transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */
transition-timing-function: step-end; /* указываем значение функции перехода (пошаговая функция) */
}
</style>
</head>
	<body>
		<div class = "test">steps(5, end)</div>
		<div class = "test2">steps(5, start)</div>
		<div class = "test3">step-start</div>
		<div class = "test4">step-end</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-timing-function мы указали различные пошаговые функции.

Обратите внимание, что при использовании функции step-start значение свойства transition-duration (продолжительность перехода) игнорируется, а при использовании функции step-end оно выступает в роли задержки перехода.

Результат нашего примера:

Рис. 169 Скорость переходного эффекта в CSS (пошаговые функции).

Универсальное свойство transition

Ну и апогеем этой статьи послужит изучение свойства transition, оно является универсальным и позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.

Это свойство является короткой записью для следующих свойств, которые мы изучили (список соответствует порядку указания значений):

Синтаксис свойства:

transition:"property duration timing-function delay"; /* порядок важен */

Обращаю Ваше внимание, что если вы хотите задать только задержку (transition-delay), то вам придется указать и продолжительность (transition-duration) равную нулю (0s). Например, если вы хотите указать задержку 4 секунды, то вам необходимо записать это так:

transition: 0s 4s; /* задержка четыре секунды */

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

transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s;

/* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды,
при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease)
и это всё происходит с предварительной задержкой в 100 миллисекунд.

Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде,
при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear)
и это всё происходит с предварительной задержкой в 2 секунды.

Свойство background будет применено с задержкой 4 секунды. */

Давайте, в заключение статьи рассмотрим пример в котором создадим переходный эффект для элемента <input>.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования универсального свойства transition</title>
<style>
input[type=text] {
width: 20%; /* ширина элемента */
transition: width 500ms ease-in-out; /* описываем переходный эффект (свойство, продолжительность и функция) */
}
input[type=text]:focus {
width: 40%; /* ширина элемента при фокусе на элементе */
}
</style>
</head>
	<body>
		Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос">
	</body>
</html>

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

Результат нашего примера:

Рис. 170 Пример использования универсального свойства transition.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующий документ:

    Практическое задание № 33.

    Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.


© 2016-2021 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]

CSS: переключатель наведения


Пример

Выбор и стиль ссылки при наведении на нее курсора:

а: парение {
фон-цвет желтый;
}

Попробуй сам "

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Селектор : hover используется для выбора элементов при наведении на них указателя мыши.

Совет: Селектор: hover можно использовать для всех элементов, а не только по ссылкам.

Совет: Используйте селектор: link для стилизации ссылок на непосещенные страницы, селектор: посещенный для стиля ссылки на посещенные страницы, и : активный селектор для стилизации активной ссылки.

Примечание: : hover ДОЛЖЕН стоять после: link и: loaded (если они присутствуют) в определении CSS, чтобы быть эффективным!


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

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

Селектор
: парение 4.0 7,0 2,0 3,1 9,6

Примечание: В IE должен быть объявлен чтобы селектор: hover работал с другими элементами, кроме элемента .


Синтаксис CSS

: hover {
css декларации ;
} Демо

Другие примеры

Пример

Выбор и стиль элемента

,

и

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

p: hover, h2: hover, a: hover {
background-color: yellow;
}

Попробуй сам "

Пример

Выбор и стиль непосещенных, посещенных, наведенных и активных ссылок:

/ * непосещенная ссылка * /
a: ссылка {
цвет: зеленый;
}

/ * посещенная ссылка * /
a: посещенная {
цвет: зеленый;
}

/ * наведение указателя мыши на ссылку * /
a: hover {
цвет: красный;
}

/ * выбранная ссылка * /
a: активна {
цвет: желтый;
}

Попробуй сам "

Пример

Стили ссылок с разными стилями:

а.ex1: hover, a.ex1: active {
цвет: красный;
}

a.ex2: hover, a.ex2: active {
font-size: 150%;
}

Попробуй сам "

Пример

Наведите указатель мыши на элемент , чтобы отобразить элемент

(например, всплывающую подсказку):

div {
дисплей: нет;
}

span: hover + div {
display: block;
}

Попробуй сам "

Пример

Показать и скрыть раскрывающееся меню при наведении курсора мыши:

ul {
дисплей: встроенный;
маржа: 0;
отступ: 0;
}
ul li {display: inline-block;}
ul li: hover {background: # 555;}
ul li: hover ul {display: block;}
ul li ul {
позиция: абсолютная;
ширина: 200 пикселей;
дисплей: нет;
}
ul li ul li {
справочная информация: # 555;
дисплей: блочный;
}
ul li ul li a {display: block! Important;}
ul li ul li: hover {background: # 666;}

Попробуй сам "

Связанные страницы

Учебник

CSS: ссылки CSS

Учебное пособие по CSS: Псевдоклассы CSS



68 CSS Hover Effects

Коллекция отобранных вручную бесплатных HTML и CSS эффектов наведения примеров кода: анимаций, переходов и т. Д. .Обновление коллекции за февраль 2020 года. 18 новинок.

  1. Примеры эффектов наведения курсора CSS
  2. Библиотеки CSS эффектов наведения
  1. jQuery Hover Effects
  2. Bootstrap Hover Effects

HTML и CSS эффект наведения примеров кода.

Автор
  • Амит Шин
О коде

Отображение положения мыши в CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Ана Тудор
О коде

Парящие лучи с маскировкой и магией Houdini

Совместимые браузеры: Chrome, Edge, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Микаэль Айналем
О коде

О нас Эффект всплывающего окна

Использование clip-path: path (...) для создания эффекта всплывающего окна.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Ана Тудор
О коде

Кроссбраузерность без эффекта дублирования изображения с реальным

img Elments

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Гиоргос
О коде

Незаметный крест при наведении курсора на углы предмета сетки

На основе эффекта Windows 10 Fluent Design в приложении «Калькулятор», где при наведении курсора на элемент отображается тонкий крестик в углу, ближайшем к курсору.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Сом Шекхар Мукерджи
О коде

Подчеркнутый-Анимация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Адам Аргайл
О коде

Эффект перехода при выводе мыши из CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Брайан Бэйл
О коде

Узор + фоновый комбо

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Райан Маллиган
О коде

Supa Dupa Fly Hover

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Такане Ичиносе
О коде

Кнопка с эффектом голограммы, только CSS, значок 3D

Это кнопка без Javascript; при наведении указателя мыши на кнопку появится значок 3D, похожий на эффект голограммы.Кнопку можно повернуть, наведя указатель мыши на кнопку.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Сикрити Дакуа
О коде

Взаимодействие с информацией о наведении карты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • дугласмофет
О коде

Карточный псевдоэлемент Hover

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Слепок CSS: стилизация братьев и сестер при наведении курсора

Используйте CSS-селектор : not для стилизации братьев и сестер при наведении курсора.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Håvard Brynjulfsen
О коде

Fancy Slide-in Hover, только CSS

Эффект плавного наведения с использованием некоторого позиционирования и псевдокласса. Работает с любым размером.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Айсенур Тюрк
О коде

Приведи друзей Анимация наведения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Мартин Уитакер
О коде

Искусство бессмысленно

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Сара Фоссхайм
О коде

Анимация радужного аккордеона

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Паулина Гетьман
О коде

Эффект наведения с учетом направления только для CSS

Поставляется с Sass @mixin , так что вы можете быстро изменять количество столбцов и элементов.Также вы можете изменить размер окна. Он продолжает работать при изменении сетки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Влад Ракоар
О коде

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

Анимация наведения курсора clip-path , полностью доступная с клавиатуры.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор
  • Джесси Коуч
О коде

Развлечения с: зависанием

Просто поиграйте с некоторыми интересными вещами, которые вы можете сделать с помощью CSS : hover при стилизации тех же элементов HTML (и их братьев и сестер).

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Многокнопочная кнопка для наведения на плитку

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Подключения CSS Hover FX

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

CSS Hover FX

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Мелисса Эм
О коде

Гладкая и резкая

Преобразование эффекта наведения краев на чистом CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Энди Бэрфут
О коде

Тесселяции Электронная торговля

Тесселяция элементов сетки электронной коммерции с эффектами наведения.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Крис Койер
О коде

Анимация в шахматном порядке

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Чистый CSS Box Hover с фоновым эффектом

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Дронка Рауль
Сделано из
  • HTML / CSS (SCSS) / JavaScript (Babel)
О коде

Кинетическая магнитная точка

Кинетическая магнитная точка с небольшим количеством JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Эффект наведения для ящиков

Эффект наведения на блоки в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор
  • Брэдли Будач
О коде

Эффект парения круга

Эффект наведения кружка на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • ВикторКоролюк
О коде

Эффект наведения круговой ряби на кнопку

Наведите указатель мыши на каждую из кнопок, чтобы увидеть эффект в действии.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Сиддхартх Хубли
О коде

Наведите указатель мыши на информацию о продукте

Используемые свойства CSS: filter: drop-shadow () , clip-path: polygon () , CSS Grid.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Фитри Али
О коде

Эффект наведения, как Super Team Deluxe

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Жуан Марсель
О коде

Футуристический 3D эффект наведения

Можно использовать как навигацию, меню или эффект.Он использует CSS , преобразование и перспективу для создания уникального анимационного эффекта, подобного гололенсам. Может использоваться для многих других случаев использования, у вас, вероятно, будут свои собственные идеи. Это экспериментальная идея, вы можете усовершенствовать ее для использования в продакшене.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

О коде

Показывать содержимое карты при наведении курсора

Эффект наведения чистой карточки в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: material-icons.css

Автор
  • Тобиас Глаус
О коде

Позвольте мне увидеть, что у вас есть!

Эффект наведения для бокса с медиа-контентом в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Коробка с эффектом волшебного зума

Коробка с анимированным волшебным эффектом масштабирования на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Анимированный блок с эффектами наведения

Анимированный бокс с эффектами наведения в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Лукаш Вернер
О коде

Анимация углов коробки

Анимация углов прямоугольника при наведении курсора на чистый CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Дэвид Лейнингер
О коде

Эффект наведения: всплывающая анимация и фоновая анимация

Эффект наведения на товар. Изображение выскакивает вверх и вниз, а затем фон выдвигается и оживает.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Джордж У. Парк
Сделано из
  • HTML
  • CSS
  • JavaScript / Babel
О коде

Эффект прожектора с радиальным градиентом

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

Автор
  • Инь Сзето
О коде

Иконки парят

Симпатичные эффекты наведения для иконок.

О коде

Эффект сбоя при наведении

Узнайте, как создать эффект сбоя с помощью CSS clip-path без JS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Квентин Верон
Сделано из
  • HTML / Мопс
  • CSS / SCSS
  • JavaScript
О коде

Адаптивный 16/9 Thumbnail & Shine Hover Effect

Этот эскиз поддерживает соотношение сторон 16/9 при любом размере.Есть эффект сияющего наведения и небольшая анимация при запуске видео. Эффект сияния с использованием переменных CSS, вдохновленных Раулем Дронка.

Автор
  • Кэссиди Уильямс
О коде

Анимация наведения

Один div анимация наведения.

Демонстрационный GIF: Attract Hover Effect

Attract Hover Effect

Привлекайте эффект наведения с помощью HTML, CSS и JavaScript.
Сделано Луи Хёбрегсом
6 июля 2017 г.

Демо-изображение: Эффект наведения перспективы на чистом CSS

Эффект наведения перспективы на чистом CSS

Список блоков с эффектом перспективы.
Сделано Максимом Лафари
6 июля 2017 г.

Демонстрационное изображение: Эффект наведения изображения

Эффект наведения на изображение

Изображение с эффектом отражения и приближения при наведении курсора.
Сделано Тьяго Александр Лопес
2 июня 2017 г.

Демонстрационное изображение: Эффекты наведения для сложенных карт

Эффекты наведения для сложенных карт

Просто поиграйте с дополнительными CSS-переходами и эффектами наведения.
Сделано Кайл Брамм
17 мая 2017 г.

Автор
  • Патент Русь
О коде

Размытие при наведении на чистый CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Демонстрационное изображение: CSS 3D Hover

CSS 3D Hover

Чистый 3D-эффект наведения CSS для карточек.
Сделано Ахил Сай Рам
24 декабря 2016 г.

Автор
  • Бастиан Андре
О коде

Поднятые бумажные полоски

Поднятые бумажные полоски (эффект наведения).

Демо-изображение: 10 стильных эффектов наведения с LESS

10 стильных эффектов наведения с LESS

Небольшая коллекция стильных эффектов с LESS.
Сделано Ренаном К. Араужо
13 октября 2016 г.

Демонстрационное изображение: 10 потрясающих эффектов при наведении на SCSS

10 потрясающих эффектов при наведении на SCSS

Небольшая коллекция стильных эффектов с SCSS.
Сделано Ренаном К. Араужо
13 октября 2016 г.

Демонстрационное изображение: Визуализация трехмерной перспективы на чистом CSS с : наведение Анимация

Визуализация трехмерной перспективы на чистом CSS с

: наведение Анимация

Совет: чтобы сохранить этот трехмерный вид, вы должны знать детали, длина слова должна быть пропорциональна номеру свойства перспективы тела.Если длина этого слова увеличивается, вы должны увеличить перспективу 🙂
Сделано Рафаэлем Гонсалесом
16 сентября 2016 г.

О коде

CSS Only Fade Siblings On Hover

Убрать всех братьев и сестер при наведении курсора на элемент, используя только CSS.

Автор
  • Джереми Буле
О коде

Эффект наведения для Discover A Project Link

Эффект наведения, например, для обнаружения названия проекта в портфолио.

Демо-изображение: Hover Squares

Hover Squares

всплывающих квадратов HTML и CSS.
Сделано Рудольфом ван дер Веном
8 декабря 2015 г.

Автор
  • Никола Пресс
О коде

Эффект наведения

Анимационный эффект наведения.

Автор
  • Николай Таланов
О коде

Концепция вопросника на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Демонстрационный GIF: 3D-эффект наведения с указанием направления

3D-эффект наведения с указанием направления

CSS и биты JS.
Сделано Ноэлем Дельгадо
30 октября 2014 г.

Демонстрационный GIF: CSS3 Hover Effects

CSS3 Hover Effects

На основе tympanus.net, демонстрации большинства эффектов при наведении курсора CSS3.
Сделано в honglio
21 ноября 2013 г.

Демонстрация GIF: Анимация наведения

Анимация наведения

Использует jQuery для добавления / удаления классов и запуска анимации только при наведении курсора мыши.
Сделано Мэттом Болдтом
8 июля 2013 г.

Библиотеки эффектов зависания

HTML и CSS (5 элементов).

Демо-изображение: Hover.css

Hover.css

Коллекция CSS3-эффектов наведения, применяемых к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. Д. Легко применяйте к своим собственным элементам, изменяйте или просто используйте для вдохновения. Доступен в CSS, Sass и LESS.
Сделано Яном Ланном

Демо-образ: iHover.css

iHover.css

iHover - это коллекция эффектов наведения с использованием чистого CSS, вдохновленная статьей codrops, созданной на Sass.
Сделано gudh

Демонстрационное изображение: Эффекты наведения на изображение

Эффекты наведения на изображение

Эффекты наведения изображения, которые работают с Bootstrap или без него.
Сделано Майклом

Демо-изображение: Mocassin.css

Mocassin.css

Mocassin.css - это адаптивный набор эффектов наведения для подписей, созданный на основе Sass. Каждая подпись адаптируется к размеру изображения.
Сделано Элиэзером Пуйольсом

Демо-изображение: HoverEffects.css

HoverEffects.css

Несколько эффектов наведения для навигации (CSS3).
Сделано Кевином Яннисом

: hover - CSS: каскадные таблицы стилей

Псевдокласс CSS : hover совпадает, когда пользователь взаимодействует с элементом с помощью указывающего устройства, но не обязательно активирует его.Обычно он срабатывает, когда пользователь наводит курсор на элемент (указатель мыши).

 
a: hover {
  оранжевый цвет;
}
  

Стили, определенные псевдоклассом : hover , будут переопределены любым последующим псевдоклассом, связанным со ссылками (: ссылка , : посещенный или : активный ), который имеет, по крайней мере, такую ​​же специфичность. Чтобы правильно оформить ссылки, поместите правило : hover после правил : ссылка и : посещено , но перед правилом : active , как определено в LVHA-order : : link - : посещено - : наведите курсор на - : активно .

Примечание: Псевдокласс : hover вызывает проблемы на сенсорных экранах. В зависимости от браузера псевдокласс : hover может никогда не совпадать, совпадать только на мгновение после касания элемента или продолжать совпадение даже после того, как пользователь перестал касаться и пока пользователь не коснется другого элемента. Веб-разработчики должны убедиться, что контент доступен на устройствах с ограниченными или отсутствующими возможностями зависания.

Базовый пример

HTML
   Попробуйте навести курсор на эту ссылку.
  
CSS
  a {
  цвет фона: голубой пудра;
  переход: цвет фона .5s;
}

a: hover {
  цвет фона: золото;
}
  
Результат

Галерея изображений

Псевдокласс : hover можно использовать для создания галереи изображений с полноразмерными изображениями, которые отображаются только при наведении указателя мыши на эскиз. См. Эту демонстрацию для возможной подсказки.

Примечание: Для аналогичного эффекта, но на основе псевдокласса : checked (применяется к скрытым радиобоксам), см. Эту демонстрацию, взятую со справочной страницы: checked.

таблиц BCD загружаются только в браузере

Что такое анимация наведения курсора CSS и как ее использовать?

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

Благодаря CSS интерфейсные разработчики теперь могут создавать анимацию и переходы без JavaScript или Flash.Это означает, что создание такой интерактивности стало проще и дешевле, чем раньше.

Как анимация CSS, так и свойства перехода могут быть указаны с помощью псевдоклассов, которые определяют особое состояние элемента. Только в этом состоянии элемент изменится с одного стиля на другой. Псевдоклассы включают:

  • : hover - когда пользователь наводит курсор на элемент
  • : фокус - когда пользователь щелкает или касается элемента, или выбирает его с помощью клавиши Tab на своей клавиатуре
  • : активный - когда пользователь нажимает на элемент
  • : цель - когда пользователь нажимает на другой элемент

Из приведенных выше псевдоклассов: hover является наиболее распространенным.

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

Что такое CSS-анимация наведения?

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

Взгляните на пример ниже.Если вы наведете курсор на div, он постепенно изменится от светло-розового до темно-розового.

См. CSS-переход пера при наведении курсора Кристины Перриконе (@hubspot) на CodePen.

Хотя это похоже на анимацию, на самом деле это переход. Эти два термина часто используются как синонимы, но анимация и переходы различаются.

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

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

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

Давайте посмотрим на анимацию отскока ниже.

Отскок при наведении

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

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

Затем я определю анимацию, которая завершит отскок за две секунды и будет работать бесконечно (пока пользователь продолжает наводить курсор на div). Я также установил для него время легкость , чтобы анимация начиналась медленно, ускорялась, а затем замедлялась.

Наконец, я определю три ключевых кадра. Первый установит начальное состояние анимации. В 0% , или в первый момент последовательности анимации, элемент будет в 0 пикселей по оси Y. При 50% или на середине последовательности анимации элемент переместится на 100 пикселей вверх по оси Y.В точке 100% или в конце последовательности анимации он вернется туда, где он был начат по оси Y, завершив свой отскок.

Посмотрите на результат ниже.

См. "Отскок пера при наведении" Кристины Перриконе (@hubspot) на CodePen.

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

Теперь, когда мы более знакомы с CSS-анимацией наведения и переходами, давайте посмотрим, зачем вам тратить время и ресурсы на их создание.

Как использовать CSS при наведении

Использование псевдокласса: hover в CSS имеет несколько потенциальных преимуществ.

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

Источник изображения

Некоторые веб-сайты также используют эффект наведения, поэтому дополнительная информация появляется только тогда, когда пользователь наводит курсор на элемент. В противном случае он остается скрытым. Это идеально подходит для добавления подсказок на ваш сайт, которые могут принести пользу новичкам, но раздражают более опытных пользователей. Вот пример разработчика Саши Тран.

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

Однако важно отметить, что псевдокласс: hover не всегда работает должным образом на сенсорных экранах. Элемент может никогда не начать свой переход или эффект анимации, когда пользователь наводит на него курсор. Или он может остановиться через мгновение после того, как пользователь наведет курсор на элемент. Или он может непрерывно воспроизводить свою анимационную последовательность в цикле, даже если пользователь больше не наведен на нее, и останавливаться только после того, как пользователь наводит курсор или щелкает на другом элементе.Его поведение зависит от браузера.

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

Как создать анимацию наведения курсора CSS

Вот как настроить CSS-анимацию наведения на элемент:

1. Настройте свойство анимации.

Используйте свойство animation или его подсвойства для стилизации элемента.

Обратите внимание, что здесь настраивается только продолжительность, время и другие детали того, как будет развиваться последовательность анимации. Чтобы фактически начать последовательность анимации и заставить элемент двигаться, вам нужно установить правило @keyframes .

2. Определите подсвойства свойства анимации.

Свойство анимации состоит из следующих подсвойств:

имя-анимации

Ат-правило @keyframes .Объявление animation-name используется как свойство, а имя анимации - как значение свойства (например, animation-name: bounce; ).

продолжительность анимации

Это продолжительность одного цикла анимации. Он может быть установлен в секундах (с) или миллисекундах (мс) (например, animation-duration: 3s;) .

функция синхронизации анимации

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

задержка анимации

Время до того, как загруженный элемент запустит последовательность анимации. Он определяется в секундах или миллисекундах. Значения: время (необязательно), начальное (устанавливает для свойства значение по умолчанию) и наследование (наследует свойство от родительского элемента).

Допускаются отрицательные значения. Если установлено отрицательное значение, анимация запускается так, как если бы она уже была воспроизведена.Например, в animation-delay: -2s; , анимация будет вести себя так, как если бы она начала воспроизводиться 2 секунды назад.

количество итераций анимации

Это количество повторов анимации. Вы можете определить его как infinite , чтобы повторять анимацию бесконечно. Значения свойств следующие: число (значение по умолчанию - 1), бесконечное, начальное (устанавливает для свойства значение по умолчанию) и наследование.

анимация-направление

Устанавливает начальную точку последовательных циклов.Анимация может менять направление или сбрасываться и повторяться. Значения свойств: нормальный (воспроизведение вперед), обратное (воспроизведение назад), альтернативное (воспроизведение вперед, затем назад), альтернативно-обратное (воспроизведение назад, затем вперед), начальное и наследование.

режим заливки анимации

Это значения, применяемые элементом, когда анимация не воспроизводится (т.е. перед первым ключевым кадром и после воспроизведения последнего). Значения свойств: нет (по умолчанию, к элементу не применяются стили), вперед (элемент сохраняет значения стиля, заданные последним ключевым кадром), назад (элемент сохраняет значения, установленные первым ключевым кадром), оба (анимация следует правилам для обоих направлений. ), начальный и наследуемый.

состояние воспроизведения анимации

Определяет статус анимации (запущена или приостановлена). Это позволяет воспроизведенной анимации возобновить работу с того места, где она была приостановлена, а не начинать заново. Значения свойств: приостановлено, запущено, начальное и наследование.

3. Используйте ключевые кадры для определения последовательности CSS-анимации при наведении курсора.

После определения свойства анимации и дополнительных свойств необходимо настроить at-правило @keyframes . Это поможет вам установить по крайней мере два ключевых кадра, которые описывают, как анимация должна отображаться в определенных случаях во время последовательности.

Чтобы обеспечить наилучшую поддержку во всех браузерах, правило @keyframes должно иметь префикс поставщика, как и все остальные свойства transition и animation .

Префиксы поставщиков должны выглядеть так:

@ -moz-ключевые кадры

@ -o-ключевые кадры

@ -webkit-keyframes

Примечание: предыдущие примеры не имели префикса поставщика, чтобы они выглядели как можно проще.

Чтобы указать различные точки останова по ключевым кадрам, используется <процент> , где 0% является первым моментом последовательности, а 100% - последним. Две точки также могут быть определены по их псевдонимам от и до соответственно.

Вы можете установить промежуточный момент на 50% и / или любые дополнительные точки останова, которые вам могут понадобиться.

Свойства, которые нужно анимировать ( слева, и сверху, ), перечислены внутри точек останова, как показано в примере Шэя Хоу ниже.

Обратите внимание, что можно анимировать только отдельные свойства.

Например, если вы хотите переместить элемент сверху вниз, пытаясь анимировать от top: 0; От до внизу: 0; не сработает.

Вместо этого вам нужно будет анимировать с top: 0; С по верхний: 100%; .

4. Используйте сокращение CSS Hover Animation.

Подобно переходам, анимацию можно записывать в сокращенном формате. Это достигается за счет использования одного свойства animation вместо нескольких объявлений.

По порядку, вот как должны отображаться значения в свойстве animation : название-анимации, продолжительность-анимации, функция-времени-анимации, задержка-анимации, количество итераций-анимации, направление-анимации, заполнение-анимации. режим и состояние воспроизведения анимации.

Теперь, когда вы знаете, как создать CSS-анимацию при наведении курсора, давайте рассмотрим несколько примеров, которые вдохновят вас.

Примеры анимации наведения курсора CSS

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

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

1. Sass Hover Effects

Источник изображения

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

2. Эффекты при наведении курсора на кнопку

Источник изображения

Это набор из пяти эффектов при наведении курсора. Когда ваша мышь наводит курсор на кнопку, они реагируют анимацией. Все они удобны, просты и готовы к использованию на вашем веб-сайте или целевой странице.

3. CSS-эффекты при наведении курсора на изображение

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

4. Эффекты при наведении курсора на творческое меню

Эти эффекты наведения курсора CSS помогут вашему сайту выделиться благодаря интерактивности на панели навигации.

5. Эффект наведения значков социальных сетей

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

6. Анимация масштабирования при наведении курсора

Источник изображения

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

7. Переворот анимации при наведении курсора

Источник изображения

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

8. Поворот анимации при наведении курсора

Источник изображения

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

9. Пауза анимации при наведении курсора

Источник изображения

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

Добавление анимации наведения на ваш веб-сайт

Интерактивность - ключ к обеспечению хорошего взаимодействия с пользователем в Интернете. CSS-анимация наведения и переходы - отличный способ улучшить интерактивность вашего сайта.Они могут не только сделать ваш сайт более интересным, но и предоставить важную информацию вашим посетителям и побудить их к действию на вашем сайте. Самое приятное: вам нужно только немного знать HTML и CSS, чтобы их создавать.

Лучшие CSS-эффекты при наведении курсора на кнопки, которые вы тоже можете использовать

Если вы хотите немного изменить свою страницу, идеально подойдет установка эффектов наведения кнопки CSS. Это поможет сократить время пребывания посетителей. Анимированные кнопки побудят посетителей увидеть, что предлагает ваш сайт, и сделают вашу страницу более динамичной.Это также повышает репутацию вашего бренда.

Эта статья покажет вам 20 различных эффектов при наведении курсора на кнопки CSS. Все они легкие, простые и удобные в использовании. Даже при минимальных знаниях Javascript и CSS настроить эти эффекты несложно. Вы можете поэкспериментировать с макетами и выяснить, что лучше всего подходит для вас.

Простые в использовании и понятные эффекты наведения кнопки CSS

Кнопка Fun

Эти кнопки CSS обладают классным эффектом ауры текста и цветов при наведении на них курсора.Это сделает ваш дизайн более живым и понравится тем, кто посещает ваш сайт.

Кнопка Twitter для скрытой двери

Используя эту кнопку, пользователи могут взаимодействовать с вашим веб-сайтом с помощью дополнительных элементов взаимодействия. Вы увидите изображение, похожее на значок Twitter. Когда вы наводите указатель мыши на него, появляется структура, похожая на скрытую дверь, пока она удерживает кнопку действия.

Кнопка Cool Beans 60 кадров в секунду

Использовать эту кнопку довольно просто.Вы можете выбрать, использовать ли трансформации и непрозрачность для анимации. Вы можете сообщить браузеру следующую анимацию, используя "will change: transform".

CSS3 Эффекты при наведении курсора на кнопку с FontAwesome

Эта кнопка связана с FontAwesome с уникальными вариантами дизайна. Этот CSS3 имеет различные эффекты наведения CSS, которые показывают стрелку вместо текста. Он содержит стрелку на кнопке, известную как текстовый сдвиг.

Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода

WoW ваших клиентов, создавая инновационные и быстро реагирующие веб-сайты
быстро, без опыта программирования.Slider Revolution позволяет
привлечь к вам множество клиентов за модным дизайном веб-сайтов.

Пользовательский значок CSS Button Hover

Эффект наведения этой кнопки является 3D-анимированным, на основе CSS и HTM. Вы можете использовать кнопки в разделе призыва к действию, чтобы сделать его более привлекательным и побудить людей купить ваш продукт или услугу. Можно редактировать текстовую часть внутри кнопки.

Анимированная кнопка с радужным наведением

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

Откидная кнопка

Миксин с эффектом наведения на границу кнопки Sass

При наведении курсора на кнопку CSS появится эффект рисования.

Коллекция эффектов наведения кнопок

Эта кнопка имеет несколько эффектов наведения кнопок CSS, которые могут понравиться вашим посетителям, включая изменение цвета, заливку и эффекты контура.

Анимация наведения кнопки CSS-маски

Этот эффект наведения идеально подходит для запуска кнопки кадра, что является целью разработчика для создания этой спрайтовой анимации.

CSS Fizzy Button

CSS-эффект наведения кнопки с уникальными функциями

Прозрачная прозрачная кнопка

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

Переворот кнопки CSS с автоматической шириной

Это анимированная кнопка. Вы можете настроить его тексты на лицевой и оборотной сторонах. Например, у вас есть слово «Мода» в качестве текста спереди, но при наведении курсора на эту кнопку текст изменится на «Модный».

Эффекты при наведении курсора на кнопку с Box-Shadow

Это идеальная кнопка первичного блочно-теневого типа..

Iconic Button FX

Каждый значок этой кнопки имеет свой собственный эффект подписи при нажатии или наведении курсора. Хотя вы не можете использовать все доступные значки на своем веб-сайте, вы можете клонировать их с помощью пользовательских стилей анимации. Какой бы шрифт значков вы ни выбрали для текста, они подойдут соответственно. Использование Iconic Button FX - отличный способ настроить ваш сайт.

Эффект при наведении на растягивающуюся кнопку

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

Загрузчик кнопок на чистом CSS | Bootstrap 4 | SCSS

Кнопка CSS 100 дней № 045

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

Зачищенные пуговицы

При наведении указателя мыши вы увидите анимированную диагональную одинарную рамку на этой кнопке.

Тонкие пуговицы

Кнопка маны

Эта кнопка проста и понятна.Разработчик использовал всего 80 строк CSS и несколько десятков строк HTML. При наведении курсора на кнопку создается фоновая заливка для анимации пользовательской жидкой формы.

Липкая кнопка

Эта кнопка с эффектом наведения на основе CSS поставляется с фильтрами SVG.

Кнопка CSS с эффектом наведения

Если вам нужны простые эффекты наведения кнопки CSS, эта кнопка обеспечивает эффективный и тонкий дизайн. Когда над ним парит, у него появляется исчезающая аура.

Кнопки со значками

Больше эффектов наведения кнопок CSS с настраиваемым дизайном

Эффект клика на чистом CSS

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

Анимация с кубической кривой Безье

Как только вы поместите указатель мыши на кнопку, текст изменит цвет.Вы можете настроить цвет текста и кнопок в соответствии со своими предпочтениями. Хотя эта кнопка проста, она сделает вашу страницу интереснее и интереснее.

Простые эффекты наведения кнопки CSS

Эта кнопка имеет эффект сдвига цвета при разделении на X-образную форму при наведении курсора. Текст также растягивается вместе с эффектом кнопки. Он улучшает дизайн и макет вашего сайта, а также делает вашу страницу более живой.

Пограничная кнопка

Необычный эффект наведения этой кнопки делает ее использование забавным.

Эффект наведения кнопки на чистом CSS

Анимация кнопок CSS + SVG

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

Кнопки наведения

Кнопка наведения, используемая для свойства смешанного режима CSS.

Изменение фона

Кнопка имеет один сплошной цвет, а граница имеет другой стиль и цвет.В результате цвет фона кнопки меняется на другой в соответствии с ее границей.

Это рекомендуемый эффект наведения кнопки CSS для ваших страниц с поддержкой AJAX. Вам не нужно перезагружать всю страницу. Используя эту бесконечную разбивку на страницы, посетители могут просматривать всю анимацию во время загрузки нового содержимого. Недостатком этой кнопки является то, что она имеет ограниченное практическое значение.

Анимация простых кнопок CSS

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

Эффект свечения при наведении

Стилизованные пуговицы

Эта кнопка имеет эффекты при наведении курсора.

CSS-иконки при наведении курсора

Это чисто на основе CSS. Когда вы примените эту кнопку к своей странице, ваша страница будет иметь скрытые значки. Они появятся только после того, как вы поместите курсор в раздел кнопок.

CSS3 Кнопки

Эффект от этой кнопки - тень и крутой эффект перехода. Когда вы нажимаете на кнопку, кажется, что она отрывается от экрана, чтобы показать текст или значки.

Анимация кнопки-призрака

Никола Попович создал эту анимацию кнопки на основе выстрела Dribbble.

Больше анимированных кнопок CSS

Эти кнопки CSS с эффектами наведения, просты и удобны в использовании. Чтобы сделать кнопки более привлекательными, не нужно изучать сложное кодирование.Он сделает всю работу за вас.

Кнопка CSS с эффектом свечения

Эта кнопка имеет привлекательный эффект свечения. Поместите курсор в верхнюю часть кнопки, появится 3D-эффект со свечением оттенка радуги.

Кнопки + Svg Trianglify

Эту кнопку легко использовать. Он имеет красочные изображения SVG с простым дизайном. Более того, у него плавный переход, поскольку он основан на CSS и Javascript. Эффекты перехода появятся при наведении курсора.

Всплывающая подсказка CSS

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

Три простых эффекта наведения кнопки CSS

Эти три эффекта наведения кнопок CSS имеют классный переход, улучшающий внешний вид вашего сайта.

Кнопка «Click Me»

На этой кнопке появится эффект наведения / щелчка CSS.

Эффекты наведения фото

Это простой эффект наведения, который идеально подходит для изображений на странице. Он полагается только на простую галерею миниатюр. Заголовок изображения, описание и кнопка «Подробнее» появятся при наведении курсора на фотографию.

Эффекты при наведении курсора на кнопку

При применении этого эффекта наведения на страницу вы можете настроить кнопки в соответствии со своими потребностями и предпочтениями.Например, вы можете применять различные эффекты с помощью тени на каждой кнопке. Помимо box-shadow, вы можете использовать border-radius и letter-spacing для сбалансированного эффекта и анимации на своем веб-сайте.

Анимированные кнопки

Эта кнопка имеет эффект наведения радуги.

Стильные анимированные кнопки CSS для блоггеров

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

Навигация

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

Эффекты при наведении курсора на кнопку CSS

С помощью этой кнопки вы увидите, что общие эффекты - это тень, пульс, угловой фон и неон.

Кнопка раскраски пузырей

Эта кнопка на основе CSS имеет эффект окраски пузырьков.

Эффекты при наведении курсора на кнопку отправки CSS

Анимируйте псевдоэлементы «: before» и «: after», чтобы получить убедительные эффекты наведения кнопки отправки CSS.

Если вам понравилась эта статья об эффектах наведения курсора на кнопки CSS, вам также следует прочитать ее:

36 лучших CSS-эффектов наведения курсора, которые вы можете использовать в 2021 году [Code + Preview]

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

Эффекты наведения CSS

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

В этой статье мы составили список из 36 лучших CSS-эффектов наведения, которые помогут вам создавать привлекательные веб-сайты. Кроме того, мы также поделимся важными подробностями об эффектах и ​​их трех основных типах вместе с примерами.

Что такое эффект наведения в CSS?

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

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

36 лучших эффектов анимации при наведении курсора CSS

1) Анимация при наведении курсора кнопки

Этот минимальный эффект можно использовать для кнопки призыва к действию на веб-странице. Края кнопки анимированы. Легкий код в CSS3 и HTML плавно анимирует кнопку и обеспечивает более быструю загрузку. Идеально подходит для адаптивных веб-страниц, кнопку можно интегрировать с существующим веб-дизайном.

На целевых страницах и сайтах можно использовать разные эффекты наведения. Эффекты и цвета можно редактировать. Плавная анимация может запускаться без проблем и отображаться на мобильных устройствах.

См. Анимацию наведения курсора на кнопку Pen
от Бхаутика Бхарадава (@bhautikbharadava)
на CodePen.

Посмотреть / скачать

2) 3D-эффект наведения с учетом направления

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

Посмотрите на Pen
3D-эффект наведения с учетом направления (концепция) Ноэля Дельгадо (@noeldelgado)
на CodePen.

Посмотреть / скачать

3) Эффект крутой анимации наведения

Этот CSS-эффект анимации при наведении, встроенный в CSS и HTML5, можно использовать для создания быстрых и плавных анимаций переворачивающего и трансформационного характера.Код анимации может быть интегрирован с существующим веб-дизайном.

См. Pen
Классная анимация при наведении от Тонифузи (@tonifuzi)
на CodePen.

Посмотреть / скачать

4) Эффект анимации наведения на чистом CSS

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

См. Анимацию наведения курсора на чистый CSS Pen
css3 от Wifeo (@wifeo)
на CodePen.

Посмотреть / скачать

5) Анимированный значок гамбургера

Этот эффект оживляет меню гамбургеров. Код прост и позволяет использовать его как в меню на мобильных устройствах, так и на веб-сайтах.

См. CSS-анимированный значок гамбургера Pen
от bura koçak (@bugrakocak)
на CodePen.

Посмотреть / скачать

6) Эффект парения простой плитки

При мозаичном дизайне можно одновременно отображать несколько видов содержимого для разработки креативного и функционального веб-дизайна. Плитку можно анимировать в зависимости от типа контента для удобства использования и простоты доступа. С помощью аккордеонов вы можете отображать максимум контента даже в ограниченном пространстве.

См. Pen
Simple Tile Hover Effect Криса Диси (@chrisdothtml)
на CodePen.

Посмотреть / скачать

7) Эффект наведения курсора на творческое меню

Эти эффекты наведения курсора на меню CSS3 находят широкое применение в меню навигации.Они делают дизайн сайта уникальным. Эффект выемки, очевидный в iPhone, может быть достигнут и в телефонах Android. Гладкость достигается с помощью кода CSS3.

См. Pen
Creative Menu Hover Effects # by abdel Rhman (@ abdelRhman345)
на CodePen.

Посмотреть / скачать

8) Привлечь эффект наведения

Элементы, такие как смайлы, можно перемещать с помощью курсора. Идеально подходит для разделов команды и обслуживания на веб-странице, этот эффект вдыхает жизнь в элементы.JavaScript используется вместе с фреймворками CSS3 и HTML5 для достижения динамического эффекта. С помощью кодирования эффект можно настроить для веб-сайта.

См. Эффект наведения Pen
Attract Луи Хубрегтса (@Mamboleoo)
на CodePen.

Посмотреть / скачать

9) Эффект наведения анимации

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

См. Эффект наведения анимации Pen
от Никола Пресси (@ ibanez182)
на CodePen.

Посмотреть / скачать

10) Светящийся значок, эффект наведения

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

См. Эффект наведения светящейся иконки Pen
от Диего Лопеса (@ dig-lopes)
на CodePen.

Посмотреть / скачать

11) Эффект наведения значков социальных сетей

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

См. Эффект наведения значков социальных сетей Pen
Эфраима Сангмы (@ ephs23)
на CodePen.

Посмотреть / скачать

12) Эффект наведения псевдоэлемента CSS3

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

См. Pen
CSS3 Hover Effect using: after Psuedo Element by Larry Geams Parangan (@larrygeams)
on CodePen.

Посмотреть / скачать

13) One Div Hover Animation

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

См. Pen
Анимация при наведении курсора на один div от Кэссиди Уильямс (@cassidoo)
на CodePen.

Посмотреть / скачать

14) Эффект наведения границы

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

См. Pen
Border Hover Effect от Diego Lopes (@ dig-lopes)
на CodePen.

Посмотреть / скачать

15) Незаметные эффекты наведения

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

Посмотреть / скачать

16) Эффекты наведения подписи

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

Посмотреть / Загрузить

17) Оригинальные эффекты наведения с CSS3

Используя переход CSS3, вы можете создавать эффекты наведения на миниатюры и применять несколько стилей для выделения определенных описаний миниатюр.

Просмотр / загрузка

18) Эффекты при наведении курсора на изображение с переходами CSS3.

Это способ создания эффектов наведения на изображения. Это основано на переходах CSS и может дать потрясающие результаты.

19) CSS3 лайтбокс

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

Посмотреть / Загрузить

20) SVG Анимация наведения - Башня

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

См. Pen
SVG Hover Animation - The Tower Роберта Эймсбери (@robertamesbury)
на CodePen.

Посмотреть / Загрузить

21) CSS «Искра» Анимация наведения

Искрящаяся анимация может оживить ссылки и кнопки с призывом к действию. При использовании анимации границы кнопок основное содержимое остается неизменным.Если вы сосредотачиваетесь только на анимации, вам может потребоваться в значительной степени использовать скрипт CSS3 и скрипт HTML для уточнения результата. Этот эффект могут успешно внедрить и новички.

См. CSS «Искрящуюся» анимацию наведения Pen
от Кэтрин Мид (@catheraaine)
на CodePen.

Посмотреть / Загрузить

22) Слева направо при наведении курсора на цвет текста

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

Посмотрите на Pen
Эффект наведения слева направо на цвет текста Бориса (@ babouz44)
на CodePen.

Посмотреть / Загрузить

23) Изображение с эффектом отражения и приближения

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

См. Pen
Изображение с эффектом отражения и приближения при наведении курсора от Тьяго Александра Лопеса (@TiagoLopes)
на CodePen.

Посмотреть / Загрузить

24) Футуристический 3D эффект наведения

Футуристический 3D-эффект наведения можно творчески использовать в качестве меню или навигации.Этот эффект имитирует необычный эффект анимации, похожий на гололены. Эти эффекты поддерживаются платформами CSS и могут использоваться для многих других целей. Он совместим с Chrome и другими браузерами, такими как Safari, Firefox, Edge и Opera. У этого эффекта нет отзывчивой персоны.

См. Содержимое карты Pen
«Показывать содержимое карты при наведении» от Марка Мида (@markmead)
на CodePen.

Посмотреть / Загрузить

25) Эффект прожектора с радиальным градиентом

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

Посмотрите, как парят значки Pen
- # 002, автор Ying Ying S (@yingyingszeto)
на CodePen.

Посмотреть / Загрузить

26) Визуализация трехмерной перспективы на чистом CSS с анимацией наведения

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

См. 3D-рендеринг перспективы Pen
на чистом CSS +: анимация наведения от Рафаэля Гонсалеса (@rgg)
на CodePen.

Посмотреть / Загрузить

27) Hover.css

Представляет собой набор эффектов наведения, которые можно применять к логотипам, ссылкам, избранным изображениям, кнопкам, SVG и т. Д. Примечательно, что это эффекты, поддерживаемые CSS3.

Посмотреть / Загрузить

28) Mocassin.css

Mocassin.css - это платформа с гибким выбором эффектов наведения для подписей.При поддержке Sass каждую подпись можно адаптировать к размеру изображения.

Посмотреть / Загрузить

29) Анимированная коробка с эффектами наведения

Представляет собой анимированное окно с эффектами наведения в HTML и CSS. Этот ящик совместим с такими браузерами, как Safari, Edge, Opera, Firefox и Chrome. Эффекты имеют адаптивный дизайн и, следовательно, удобны для мобильных устройств.

См. Анимацию углов коробки Pen
Лукаша Вернера (@ Sherpa23)
на CodePen.

Посмотреть / Загрузить

И что теперь? Попробуйте поэкспериментировать и внедрить эти эффекты на своем веб-сайте и расскажите нам о своем опыте. Вы также можете поделиться идеями о новых эффектах. Мы будем рады услышать от вас.

И прежде чем мы закончим это обсуждение на этом этапе, мы хотели бы дать вам представление о 6 простых, но элегантных стилях кнопок призыва к действию (CTA) с эффектами наведения. И мы хотели бы, чтобы вы знали, что дизайн кнопок HTML и CSS, который мы предлагаем, будет иметь облегченный код и будет простым, но достаточно эффективным, чтобы дополнить внешний вид современных веб-сайтов.

3 основных типа CSS-эффектов наведения курсора, используемых в современном веб-дизайне

Ниже мы обсудили три основных типа CSS-эффектов наведения курсора, а также несколько примеров, которые можно использовать в качестве вдохновения.

1. CSS-эффекты при наведении курсора на кнопки

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