33 CSS3 эффекта при наведении, о которых вы должны знать
10 Stylish Hover Effects
Как следует из названия, это коллекция из 10 невероятно стильных эффектов наведения.
Direction-aware Hover Effect
Когда вы наводите указатель мыши на различные элементы, CSS hover эффект при наведении следует за курсором и создает удивительные 3D презентации.
Wacom Hover Effect
Это уже довольно избитый эффект, но многие люди все равно с удовольствием его используют. Презентация является простой, но привлекательной.
CSS3 Hover Effects
Если вы ищете круговые эффекты наведения, здесь вы найдете несколько интересных. В общей сложности доступно 12 различных CSS hover эффектов рамки.
Hover Animation from UNIQLO
Это еще один интересный эффект наведения. Он идеально подойдет для миниатюр или других типов изображений.
Button Hover Effects
А вот несколько впечатляющих эффектов наведения для кнопок. Все они прекрасно подойдут для сайтов любого типа.
10 Stunning Hover Effects
Еще один набор из 10 hover эффектов CSS для кнопок. Большинство из них довольно впечатляющие.
CSS3 Hover Effects 2
Это коллекция, состоящая из четырех различных эффектов наведения на изображение. Вместе с эффектом отображаются его название и описание.
Bounce on Hover
Это забавный и интересный эффект наведения для изображений. Круглая рамка идеально подходит для применения к аватаркам участников команды, изображений рекомендаций.
8-bit Hovers
Этот стильный винтажный hover эффект CSS вызовет в вас чувство ностальгии. Вы можете использовать его, чтобы создать ретро стиль для сайта.
Simple Title Hover Effect
При наведении курсора мыши на изображение этот эффект выводит заголовки на фоне с низкой непрозрачностью.
Flip Down Effect
Это еще один простой, но очень красивый CSS hover эффект при наведении. При наведении курсора мыши на изображение он выводит название и описание с помощью смарт-эффекта перелистывания.
Curiosity Award
Пока вы не наведете курсор мыши на изображение, вы не поймете красоту этого эффекта. Случайные линии красиво превращаются в логотип, а затем он раскрашивается цветами.
Image Hover Effect
Это невероятный CSS hover эффект рамки для изображений. Способ, с помощью которого одно изображение проявляется на фоне другого, невероятен!
Hover Animation
При наведении курсора на изображение применяется уменьшение непрозрачности с фокусировкой на ссылке.
Hover Me Brother
Nautilus SCSS HAML Hover Effects
Это креативный эффект наведения, доступный в нескольких вариациях. В них предлагаются уникальные возможности для оформления изображений.
SVG Border Hover Effect 1
Подойдет для текста, кнопок или изображений. Постепенное воссоздание рамки — это действительно интересный эффект.
Hover Search Map Icon
Вам нужен CSS hover эффект при наведении для панели поиска или иконки карты? Это именно он. Его бесшовные преобразования — сплошное удовольствие для глаз.
Social Icon Pane
Этот эффект наведения можно применить, чтобы в начале скрыть иконки социальных медиа, а затем вывести их, когда пользователь наводит на них курсор мыши.
Product Item Additions Info
Это отличный способ предоставления дополнительной информации о товарах в интернет-магазине. При наведении курсора на изображение продукта с помощью красивого эффекта отображается информация о нем.
Animated Envelope
Идеальный CSS hover эффект при наведении для раздела « Связаться с нами «. Он отображает контактную информацию в раскрывающемся конверте, но только после того, как пользователь наведет курсор мыши на изображение.
Back to Top
Этот уникальный эффект наведения для кнопки « Вверх » позволяет предоставить посетителям красивый, анимированный указатель.
Fancy Hover
При наведении курсора мыши на изображение, оно не только увеличивается, но и изменяется способ его отображения.
Reminders Icon Hover Effect
Этот hover эффект CSS добавляет к изображению красивые стили.
Circle Image Hover
Эффект наведения для круговых изображений. В коллекции присутствует четыре различных стиля эффектов наведения.
Safari Icon Hover Effect
Simple Button Hover
Это простой эффект наведения, который может быть применен и к кнопкам, и к изображениям. Легкая подсветка увеличит привлекательность изображений.
3D Photo Effect Fold
Если вы запускаете сайт обмена фотографиями или каталог изображений, этот эффект окажется для вас незаменимым. При наведении курсора мыши на изображение оно сгибается забавным образом и пользователю выводятся панель операций с изображением.
3D Thumb Image Hover Effect
Это поистине уникальный CSS hover эффект рамки. При наведении курсора мыши он « кладет изображение на землю «.
Background Change CSS
Этот эффект изменяет фон при наведении курсора мыши на кнопку. Немного поэкспериментировав, можно легко реализовать его на своем сайте.
Direction Aware Hover
Это еще один CSS hover эффект при наведении, выделяющий путь перемещения курсора мыши. При наведении указателя он добавляет затемнение на изображения. И это затемнение следует за курсором.
SVG Hover Animation
Эти красивые эффекты наведения выглядят очень интересно. Анимация и масштабируемость SVG-изображений делают их идеальными для любого типа сайтов.
Заключение
Пожалуйста, опубликуйте свои мнения по текущей теме статьи. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!
CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.
Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:
Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов.
Hover эффект в CSS стилях добавляется справа от элемента следующим образом:
Чаще всего механизм применяется именно для ссылок дабы изменить их цвет или добавить/убрать подчеркивание. Однако он может быть задан и другим блокам, кнопкам, текстам или использоваться при создании горизонтального выпадающего меню.
Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы :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 эффектов позволяют значительно разнообразить и улучшить результат.
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’ы на них в комментариях. И мы в будущем дополним статью.
Со сложными примерами, конечно, мало что понятно, но вот про хувер эффект теперь буду точно знать.
Марина, нужно начинать с малого:)
Полезное чтиво для новичков однозначно!
Некоторые примеры, конечно, нереально крутые.. вряд ли когда-то смогу такое повторить, хотя я так вебмастер-любитель скорее
Марат, люди, которые делают такие «заготовки», работают во фронтенде не один год, так что это нормально (как для профи).
Мне как новичку очень нужная тут информация! Благодарю.
Спасибо за библиотеки, а то своей фантазии уже не хватает.
Уже неоднократно мы делали акцент на важности взаимодействия пользователя с сайтом. Кроме правильного расположения блоков, кнопок и продуманного пользовательского пути есть еще много фишек. И одна из них – ховер-эффект.
Ховер-эффект – это когда при наведении мышки на объект он реагирует: меняется цвет кнопки, появляется подсветка, картинка немного движется или увеличивается, всплывает информационная надпись, изменяется цвет ссылки и т.д. Вариантов ховера очень много, они зависят от фантазии и мастерства разработчика.
Зачем это нужно
Ховер-эффект – вещь достаточно простая, но именно такие мелочи и делают сайт живым и привлекательным. Это очень полезное внедрение, которое помогает пользователю сориентироваться. Ведь если при наведении мышки элемент откликается, то становится ясно, что ты на верном пути. Если это кнопка, то эффект дает понять, что ты по ней попал и можно нажимать. Если это таблица, то в ней могут подсвечиваться столбцы для более удобного просмотра.
Еще один плюс ховер-эффекта – это возможность не перенасыщать сайт информацией, сделать его лаконичным, но информативным. Например, тебе нужно сделать страницу с рекламой аренды офисных помещений. Ты размещаешь там схематичное изображение здания. При наведении мышкой на этажи, они подсвечиваются, показывая более подробную планировку. Там же может появляться информация о площади, цене и прочие подробности. И вот, твоя страница выглядит аккуратно, там нет ничего лишнего. Посетитель читает только те сведения, которые ему интересны, не перегружая мозг лишней информацией. Удобно, стильно, наглядно.
Как использовать ховер
Необязательно делать эффекты наведения функциональными. Это также игровые моменты и пасхалки, которые добавляют сайту динамики и помогают завоевать внимание и доверие пользователя.
Согласись, достаточно весело залипать на сайте с картинками котиков, если они следят глазами за твоим курсором. Сделай что-то оригинальное, это понравится твоей аудитории и заказчику. Сайты с ховером всегда конвертят лучше, чем без него – сделай два идентичных варианта с ховер-эффектами и без них, проведи АВ-тесты и убедись самостоятельно в этом.
Здесь также важно придерживаться принципа умеренности – слишком много анимации, агрессивные эффекты и резкие переходы будут раздражать. Используй плавность, ненавязчивость. Если это цвет, то не слишком кричащий, если движение, то с небольшой амплитудой.
Рассмотрим 10 самых распространенных и простых в реализации ховер-эффектов.
Как научиться
Стандартные ховер-эффекты делаются при помощи внедрения переходов через CSS3. Элемент трансформируется в переходах, с помощью которых меняется его стиль. Задается параметр изменений при наведении курсора. Для мобильных устройств нужно отдельное ПО для реализации этой функции, если вместо курсора там используется сенсор.
Для большинства перечисленных выше эффектов не требуются углубленные знания программирования и будет достаточно основ верстки и владения CSS3. Этому ты научишься на нашем бесплатном курсе «Веб-верстальщик: начало». Если с версткой ты уже знаком и хочешь делать более сложные и оригинальные ховер-эффекты, то нужно углубиться в программирование и применение плагинов. Изучай Джаву на онлайн-коучинге «JavaScript: новый уровень» – набор в новую группу уже открыт!
Что такое hover эффект? — TemplateMonster
Hover определяет стиль элемента при наведении на него курсора мыши.
Что такое hover?
Ховер помогает сделать дизайн сайта более интересным и побуждающим пользователя получить дополнительную информацию о теме ссылки.
Например, при наведении курсора мыши на одну из ссылок на странице, она может изменить цвет, указывая, что на нее можно нажать. Обычно такие ссылки добавляются на страницы или в тексты, чтоб переходя по ним, пользователь узнавал более точную информацию или переходил на страницу определенного товара для осуществления покупки.
На скрине выше показан пример изменения цвета при наведении курсора на определенную новость.
Примечание: Для смартфонов и планшетов, использующих палец вместо компьютерной мышки, невозможно навести курсор на объект без стороннего программного обеспечения.
Синтаксис
Пример
Basic example
Результат:
Ховер и галерея
Итак, что такое ховер понятно, но его можно использовать не только для подсветки текстовых ссылок.
Вы можете использовать :hover для создания галереи изображений с полноразмерными изображениями, которые отображаются только тогда, когда мышь наводится на миниатюру.
Все эти приемы помогают сделать сайт более современным и интересным, а пост не перенасыщать информацией, добавляя ссылки, по которым пользователь сможет получить дополнительную информацию. А ховер помогает сфокусировать внимание читателей на этих ссылках.
CSS3 hover effects. Пошаговый туториал
При создании этого мануала, моей целью было взять три десятка различных эффектов, частью — довольно распространенных, частью — придуманных мной, разместить их от простых к более сложным, и на их примере показать новичкам, никогда не имевшим дело с CSS3 возможностями, как эти возможности работают и как их применить на практике. Именно по этой причине статья вышла подробная, пошаговая, мне было важно описать и разобрать каждую деталь.
Демо материалы лежат здесь.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Подготовка к работе.
Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:
Дефолтные css-стили для нашей структуры (опять же, в зависимости от того, какой мы будем рассматривать эффект, они будут различаться):
Основы свойства transition. Эффекты #1.1-1.3
Чтобы этого добиться, нужно, в первую очередь, переместить этот контейнер выше, за пределы контейнера с эффектом. Для этого мы изменим ему свойство top, и стили для блока теперь будут выглядеть так:
Рассмотрим его поподробнее. Вот так должно будет выглядеть свойство transition для эффекта #1.1:
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
Первое значение устанавливает имя стилевого свойства, которое будет отслеживаться для изменения. В данном случае мы выставили all — отслеживаться будут все свойства. Второе — отвечает за время, необходимое для анимации. Третье — за то, как в течение времени, заданного вторым свойством, будет распределяться скорость перехода: где замедлится, где ускорится. Так, например, в данном случае сначала анимация будет быстрее, к середине замедлится и ближе к концу выйдет на равномерную скорость. Четвертое значение определяет, начнется анимация с задержкой или нет. Если значение равно 0s — задержки нет.
Кроме того, для этого свойства нам надо будет добавить вендорные префиксы. необходимые для корректного отображения анимации в браузерах. Как это выглядит:
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Chrome и Safari
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Opera
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для IE
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Firefox
В статье, для краткости, я буду опускать префиксы, но не забывайте добавлять их для таких свойств, как transition, transform и transform-origin. В коде примеров под кнопкой CSS (или в самих файлах) префиксы тоже есть.
Итак, мы добавили почти все, что необходимо для создания эффекта: начальные условия и условия перехода в конечную точку, осталось добавить только стили для самой конечной точки.
Изменяем прозрачность. Добавляем движение отдельных элементов. Эффекты #2.1-#2.3
В эффекте #2.1 элементы выдвигаются из центра к краям. Воспользуемся базовой html-структурой, в которую, для создания этого эффекта, не понадобится вносить никаких изменений.
Теперь, если мы зададим конечную точку анимации:
мы получим не самый красивый результат. Полупрозрачная подложка никуда не делась, элементы кучкуются в центре и неэстетично оттуда разъезжаются. Поскольку, с помощью transition, можно изменять не только положение элемента, но и, например, его прозрачность, благодаря ей мы сможем скрыть и подложку, и элементы в центре до момента, пока не понадобится их подвинуть.
Эффекты #2.2 и #2.3 построены аналогичным образом, только для эффекта #2.2 заголовок и кнопку мы смещаем сверху вниз и снизу вверх соответственно, а для эффекта #2.3 справа налево и слева направо соответственно.
Изменения, которые необходимо внести в код эффекта #2.1, чтобы получить эффект #2.2:
В остальном, все остается аналогичным.
Ну а чтобы из эффекта #2.1 получить эффект #2.3, изменим следующее:
Поговорим о transform и об увеличении/уменьшении элементов. Эффекты #3.1-#3.3
Эффект #3.1 строится на том, что, при наведении, появляются очень увеличенные элементы
html-структуру оставляем базовой. Что касается изменений в таблице стилей, уменьшающимся элементам мы должны добавить свойство transform. Transform позволяет трансформировать элементы: вращать, менять им размеры, наклонять, перемещать, комбинировать несколько свойств для создания более сложных эффектов. Для этих эффектов мы разберем уменьшение/увеличение элементов.
Необходимое для такой трансформации значение свойства transform — scale(x,y), где значение x — изменение размеров объекта по горизонтали, а y — по вертикали соответственно. Если мы применим это свойство для
Как видите, у значения scale в данном случае не два параметра, а один, и это означает, что и по горизонтали, и по вертикали наш элемент увеличен в два раза.
Теперь на hover наша задача уменьшить эти элементы до их нормального размера, что мы и делаем, добавляя эти стили:
Эффект #3.2 строится аналогично предыдущему, с тем лишь исключением, что элементы не уменьшаются, а увеличиваются при наведении мыши. Выставим для них такое значение scale: 0.25, все прочие стили остаются аналогичны.
А вот эффект #3.3 — это комбинация из перемещения элементов и изменения их размеров. Как видим, элемент
остается на своем месте и размеры не меняет, для него стили остаются стандартные. Что касается
Теперь надо задать transition, но тут встает такой вопрос: элементы должны сначала — опуститься и лишь после — увеличиться в размерах, то есть, нужно задать transition для опускания элементов без задержки и transition с задержкой для увеличения.
Задать больше одного стилевого свойства для transition — просто: мы всего лишь перечисляем их через запятую, не забыв указать все параметры для каждого свойства:
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
Добавим это правило к остальным стилевым правилам:
Задаем конечную точку трансформаций:
Крутим элементы: rotate. Задаем “точку вращения”. Эффекты #4.1-#4.4
Чтобы “крутить” элементы, свойству transform необходимо задать значение — rotate и его параметры. Какие параметры есть у значения rotate? Во-первых, ось вращения: X, Y или Z. Во-вторых, количество градусов, на которое будет повернут элемент. Так, например, если мы хотим повернуть элемент по оси Y на 30 градусов, выглядеть правило будет следующим образом:
html-структура остается базовой, равно как и стили для
Теперь при наведении мыши элемент крутанется на вышеобозначенное количество градусов. Но хотелось бы, чтобы он не только крутился, но и, в отсутствие hover, исчезал, а на hover не только вращался, но и “выплывал”. Для этого добавим еще один transform со значением scale. Чтобы добавить элементу два и более значений transform, не нужно писать правило дважды, мы просто ставим эти значения через пробел. И поступаем аналогично с hover-стилями:
Эффект #4.2 строится полностью аналогично, только заменяем ось вращения на Y.
Эффект #4.3 строится, опять же, полностью аналогично. Поскольку rotateZ() полностью аналогична записи rotate(), мы просто меняем стили на:
Эффект #4.4 сложнее. Он базируется не только на вращении и изменении размера, но еще и на изменении координат точки, вокруг которой совершается вращение, а также на усложненном значении параметра transition-timing-function свойства transition. Но начнем по порядку.
Еще немного о scale и transform-origin. Эффекты #5.1-#5.4
Для этого элемента html-структура и стили для
И, чтобы произошло увеличение, на hover:
Таким образом, мы смещаем точку, от которой происходит переход, по горизонтали в крайнее левое положение, а по вертикали она так и остается в дефолтном положении — по центру. Прочие стили остаются аналогичными.
Точка смещена в крайнее верхнее положение, по горизонтали же — остается по центру. Прочие стили аналогичны.
Как еще можно использовать связку rotate и transform-origin. Эффекты #6.1-#6.3
html-структура остается базовой, равно как и стили для
Теперь, если мы будем смещать координаты “точки перехода” и изменять направление вращение, то сможем получить различные вариации этого эффекта. Так, например, эффект #6.2 почти полностью аналогичен предыдущему, только transform-origin: center bottom; а направление вращения изменено на противоположное благодаря тому, что исходное значение стало таким transform: rotate(-180deg);
В эффекте #6.3 направление вращения остается таким же, как в #6.2, а “точка перехода” смещена на середину правой стороны контейнера: transform-origin: right center; В остальном, стили остаются теми же самыми.
Поговорим подробнее о delay. Эффекты #7.1-#7.3
Сейчас мы немного нарушим порядок разбора эффектов и начнем с эффекта #7.2, потом перейдем к #7.3, и лишь потом вернемся к #7.1 как к самому сложному из линейки.
html-структура понадобится такая:
Что касается стилей: для
Вот теперь очередность будет соблюдена, и элементы будут двигаться в правильном порядке.
Прочие стили идентичны стилям предыдущих эффектов.
Применяем полученные навыки на практике. Больше трюков! Эффекты #8.1-#10.3
Ну а на hover увеличиваем его:
Прочие стили остаются дефолтными.
Эффекты #8.2-#8.3 строятся аналогично. Вся разница лишь в том, что в #8.2 используется scaleX(), а в #8.3 — scaleY(), о которых я подробно рассказывала при разборе эффектов #3.1-#3.3
Что касается html-структуры, она такова:
Прочие стили аналогичны стилям эффекта #9.1
Эффект #9.3 строится следующим образом. Нужна такая html-структура:
Все остальные стили — дефолтные.
html-структура нужна такая:
На hover их delay тоже будут различаться:
html-структура нужна такая:
Интереснее с нижним правым. Поскольку ширина border равна 4px, просто задать ширине и высоте по 100% недостаточно, нужно компенсировать по 8px по вертикали и по горизонтали, чем нам и поможет calc:
Осталось лишь, чтоб элементы опускались на hover, причем в установленном нами порядке:
html-структура нужна дефолтная, равно как и стили для
Надеюсь, эта статья оказалась для вас полезной и интересной!