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


Оглавление (нажмите, чтобы открыть):

CSS3 эффект при наведении

20 июня 2014. Категория: Магия CSS стилей

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

Рассмотрим и реализуем один из таких эффектов на практике. Данный пример отлично впишется в дизайн веб-страницы «Наша команда» или «Наши сотрудники»

Девять простых примеров CSS3 анимации

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

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

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

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

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

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

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

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

3. Свинг

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

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

4. Затухание

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

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

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

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

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

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

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

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

8. Вращение

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

9. 3D тень


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

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

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

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

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

Мастер Йода рекомендует:  Входящие ссылки – основной фактор ранжирования в Google

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

Красивые эффекты при наведений мыши CSS3 — Второй урок

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

Перепишем стиль для маски.

Добавляем стили для события Hover

Что будет происходить?

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

Красивый эффект при наведении (:before и :after)

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

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

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

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

ul <
position: absolute;
top: 20%;
left: 30%;
list-style: none;
display: flex;
>

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

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

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

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

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

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

ul li a:before <
content: »;
position: absolute;
top: 0;
left: 0;
border-top: 1px solid #44c09d;
border-bottom: 1px solid #44c09d;
transform: scaleY(2);
transition: .5s;
>

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

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

ul li a:before <
opacity: 0;
>


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

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

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

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

ul li a:hover:after <
transform: scale(1);
>

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

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

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

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    5 крутых CSS-эффектов при наведении, которые вы можете просто скопировать и использовать

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

    Если вам понравился эффект, то вы можете просто скопировать готовый код и использовать его!

    Оживите свой веб-сайт!

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


    Сегодняшние примеры все реализованы и оптимизированы под новые современные браузеры, и обязательно будут в них работать (например, в Mozilla или браузерах семейства WebKit). Мы не можем заверить вас относительно работы в IE, но в самых свежих версиях эффекты точно будут работать как надо. Но не стоит забывать, что для каждого эффекта подготовлен привлекательный вариант отката на случай, если браузер всё-таки не будет поддерживать эффект.

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

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

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

    CSS-код эффекта Bump Up

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

    Для реализации здесь были использованы изображения размером 400х133 пикселей. Затем они были изменены в размере до 300х100 пикселей посредством CSS, и расширены при наведении курсора мыши. Так как в примере весь список выровнен по центру, новый размер изображений преломлял всё выравнивание. Эту проблему можно решить посредством выставления отрицательных полей в половину ширины изображений в увеличенном размере.

    Мастер Йода рекомендует:  MIT анонсировал проект BeeMe, приуроченный к Хэллоуину

    CSS-код для Stack & Grow

    Здесь автор хотел создать нечто вроде события по типу javascript, когда вы наводите курсор на один пункт, а эффект отображается на другом. Здесь были взяты текст и изображение, а затем помещены в отдельный div с выравниванием по левому краю. Далее к div’у были добавлены параметры color: transparent и line-height: 0px. Это позволило разместить текст по верхнему краю div’а и вообще спрятать его.

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

    CSS-код эффекта Fade Text In

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

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

    Здесь вы можете применять псевдо-селекторы.

    CSS-код для Crooked Photo

    05. Fade In and Reflect

    Этот эффект немного посложнее в реализации, поэтому нам пришлось немного повозиться с ним, чтобы добиться достойного эффекта. Стандартное положение изображения – слегка прозрачное. Затем, когда вы наводите на изображение, уровень прозрачности понижается, и изображение приобретает первоначальный вид, а также появляется небольшое свечение и отражение (только для браузеров семейства WebKit).

    К сожалению, отражение – это не совсем переход, поэтому оно появляется сразу, несмотря на то, что остальное содержимое появляется в замедленном темпе.

    Если вы запутались в CSS-коде отражений, вы можете узнать об этом побольше в статье Дэвида Уэлша (David Walsh).

    CSS-код эффекта Fade In and Reflect

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

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

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.

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

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

    Hover эффект в CSS стилях добавляется справа от элемента следующим образом:

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

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


    Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы :link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после :link и :visited, если они существуют.

    Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.

    Hover эффекты кнопок и ссылок

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

    Простые примеры для кнопок

    В данной статье приведены 8 базовых способов как можно оригинальным образом обыграть динамические hover эффект при наведении: добавление иконки, создания прозрачного фона, 3D преобразование, наклон и т.п. Все коды достаточно простые, вот один из них:

    Необычный градиентный в кнопке

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

    Sullivan Buttons

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

    CSS Icons on Hover

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

    Button Hover Effects

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

    Nav Hovers

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

    Info on Hover

    Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.

    Mana Button

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

    Hover эффекты для изображений

    15 базовых приемов

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

    Красивые hover эффекты изображений

    Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.

    Barberpole Hover Animation

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

    CSS hover эффекты с определением направления


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

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

    Мастер Йода рекомендует:  Курс «Технологии и протоколы IP сетей»

    Direction Aware Hover Goodness

    Direction Aware Tiles using clip-path Pure CSS

    Остальные фишки ищите в оригинальной статье.

    Animatism

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

    Caption Hover Effects

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

    CSS Hover библиотеки

    Hover.css

    Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.

    Imagehover.css

    Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.

    iHover

    В проекте iHover более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.

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

    Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.

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

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

    Пример можно увидеть здесь:

    Посмотреть примерСкачать

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

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

    Пример 1

    HTML часть

    Структура HTML в данном случае выглядит следующим образом:

    CSS часть

    А эффект — это появление внутреннего круга с текстом и прозрачным фоном. Для него будут следующие стили:


    Пример 2

    HTML часть

    Структура HTML точно такая же как и в первом примере.

    CSS часть

    А вот CSS отличается, так как здесь другой эффект(круг закрашивается снаружи), также используем другие изображения:

    Пример 3

    HTML часть

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

    CSS часть

    Эффект здесь также интересный: изображение как бы прибито гвоздиком, и при наведении съезжает вниз одна часть:

    Пример 4

    HTML часть

    Как и в предыдущем примере здесь есть две части формы: видимая и невидимая. Поэтому HTML структура очень похожа:

    CSS часть

    Очень красивый эффект поворота внутренней части:

    Пример 5

    HTML часть

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

    CSS часть

    Суть эффекта состоит в следующем: внутренний круг уменьшается и заменяется содержимым с текстом:

    Пример 6

    HTML часть

    В HTML всё точно также, как и в прошлых двух примерах, поэтому ничего не меняем.

    CSS часть

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

    Пример 7

    HTML часть

    Здесь опять же ничего не меняем, оставляем как в прошлом примере.

    CSS часть


    В этом примере используется 3D преобразование и смотрится оно очень красиво:

    Вывод

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

    Анимированные эффекты при наведении на веб-иконки с использованием шрифта Font Awesome

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

    Для создания веб-иконок воспользуемся шрифтом Font Awesome. Он может применяться как к псевдо-элементам, так и встраивается в файл через тег . Это очень практично тем более, когда приходиться иметь дело только со стилями CSS. Вместо редактирования исходного кода, прописывается псевдо-элемент и через свойство content: «»; выводится иконка. В сборке используются оба варианта и на выходе получаем довольно красивые анимированные эффекты, при наведении курсора на иконку (ссылку).

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

    See the Pen Zero lines JS game by Alexander Majorov ( @i0z ) on CodePen .

    Больше интересных новостей

    Программа обучения

    Видеокурсы

    Тест на выбор языка

    Не знаете какой язык изучать? Пройдите быстрый тест и определите какой язык программирования подходит именно вам!

    Интересные статьи

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

    Онлайн школа обучения
    IT профессиям

    Информация
    Аккаунт

    Подпишитесь на рассылку и сразу же получите 5 практических заданий по программированию!

    Все эффекты css3 при наведении на картинку

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

    Объясню кратко принцип работы.

    В 1 элемент до наведения мыши ставится css код:
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;

    И какие-то данные, которые будут изменены, например:
    height: 188px;
    width: 188px;

    Далее, после наведения мыши пишем css, с новыми значениями, например:
    width: 300px;
    height: 300px;

    Вот, что можно получить в итоге:

    Согласитесь кол-во эффектов просто поражает!

    Скачать данный пример css анимации для картинок

    Также вы можете просмотреть огромный html + css3 код данного примера:

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