Крутые эффекты наведения CSS, использующие обрезку фона, маски и 3D

Мы рассмотрели серию постов об интересных подходах к эффектам наведения CSS. Мы начали с куча примеров, использующих CSS background свойства, затем перешли к text-shadow собственность, где мы технически не использовали никаких теней. Мы также объединили их с переменными CSS и calc() оптимизировать код и упростить управление.

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

---

Вот только вкус того, что мы делаем:

Эффекты наведения с использованием background-clip

Давайте поговорим о background-clip. Это свойство CSS принимает text значение ключевого слова что позволяет нам применять градиенты к текст элемента вместо фактического фон.

Так, например, мы можем изменить цвет текста при наведении, как если бы мы использовали color свойство, но таким образом мы анимируем изменение цвета:

Все, что я сделал, это добавил background-clip: text к элементу и transition домен background-position. Это не должно быть сложнее!

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

В этом примере я использую два разных градиента и два значения с background-clip. Первый фоновый градиент обрезается до текста (благодаря text значение), чтобы установить цвет при наведении, в то время как второй фоновый градиент создает нижнее подчеркивание (благодаря padding-box ценность). Все остальное прямо скопировано из работа, которую мы сделали в первой статье из этой серии.

Как насчет эффекта наведения, когда полоса скользит сверху вниз, как будто текст сканируется, а затем окрашивается:

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

Мы только коснулись того, что мы можем сделать с нашим background-clipпинг силы! Тем не менее, вы, скорее всего, не захотите использовать этот метод в рабочей среде, поскольку Firefox, как известно, имеет много сообщений об ошибках связанные с background-clip. У Safari также есть проблемы с поддержкой. Это оставляет только Chrome с надежной поддержкой для этого материала, так что, возможно, откройте его, когда мы продолжим.

Давайте перейдем к другому эффекту наведения, используя background-clip:

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

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

Круто, да? разберем код:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

У нас есть три фоновых слоя — два градиента и background-color определяется с использованием --_c переменная, которая изначально установлена ​​​​прозрачной (#0000). При наведении мы меняем цвет на белый и --_c переменная к основному цвету (--c).

Вот что происходит на этом transition: Сначала мы применяем переход ко всему, но задерживаем color и background-color by 0.5s для создания эффекта скольжения. Сразу после этого меняем color и background-color. Вы можете не заметить никаких визуальных изменений, потому что текст уже белый (благодаря первому градиенту), а фон уже настроен на основной цвет (благодаря второму градиенту).

Затем, по нажатию мыши, мы применяем мгновенное изменение ко всему (обратите внимание на 0s задержка), за исключением color и background-color которые имеют переход. Это означает, что мы возвращаем все градиенты в исходное состояние. Опять же, вы, вероятно, не увидите никаких визуальных изменений, потому что текст color и background-color уже изменено при наведении.

Наконец, мы применяем затухание к цвету и background-color чтобы создать часть анимации без мыши. Я знаю, это может быть сложно понять, но вы можете лучше визуализировать трюк, используя разные цвета:

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

Не будем забывать метод СУХОГО переключения, который мы использовали в предыдущих статьях этой серии, чтобы уменьшить объем кода, используя только одну переменную для переключателя:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

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

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

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

Эффекты наведения с помощью CSS mask

Угадай, что? CSS mask свойство использует градиенты так же, как background свойство делает, так что вы увидите, что то, что мы делаем дальше, довольно просто.

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

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

Введите CSS mask.

Код может показаться странным, но логика остается той же, что и во всех предыдущих фоновых анимациях. mask состоит из двух градиентов. Первый градиент определяется непрозрачным цветом, который покрывает область содержимого (благодаря content-box ценность). Этот первый градиент делает текст видимым и скрывает нижнюю зигзагообразную границу. content-box это mask-clip значение, которое ведет себя так же, как background-clip

linear-gradient(#000 0 0) content-box

Второй градиент покроет всю область (благодаря padding-box). У этого есть ширина, которая определяется с помощью --_p переменная, и она будет размещена слева от элемента.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

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

.hover:hover { --_p: 100%; color: var(--c);
}

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

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

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

Давайте изменим конфигурацию фона, заменив зигзагообразное подчеркивание на волнистое:

Еще одна коллекция эффектов при наведении! Я сохранил все конфигурации маски и изменил фон, чтобы создать другую форму. Теперь вы понимаете, как мне удалось чтобы достичь 400 эффектов наведения без псевдоэлементов — а можно и больше!

Мол, а почему бы и не так:

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

Эффекты наведения в 3D

Вы можете подумать, что невозможно создать 3D-эффект с помощью одного элемента (и не прибегая к псевдоэлементам!), но CSS позволяет это сделать.

То, что вы видите, не настоящий 3D-эффект, а скорее идеальная иллюзия 3D в 2D-пространстве, сочетающая в себе CSS. background, clip-pathкачества transform свойства.

Первое, что мы делаем, это определяем наши переменные:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

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

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

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

Для второй части трюка нам нужно определить один градиент, который покрывает все области границ, которые мы определили ранее. А conic-gradient будет работать для этого:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

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

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Последним шагом является применение CSS clip-path чтобы срезать углы для ощущения длинной тени:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

Это все! Мы только что создали 3D-прямоугольник, используя только два градиента и clip-path которые мы можем легко настроить с помощью переменных CSS. Теперь все, что нам нужно сделать, это анимировать его!

Обратите внимание на координаты с предыдущего рисунка (обозначены красным). Давайте обновим их, чтобы создать анимацию:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

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

Эта ручка изолирует clip-path часть анимации, чтобы увидеть, что она делает:

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

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

Сочетание эффектов!

Удивительная вещь во всем, что мы рассмотрели, заключается в том, что все они дополняют друг друга. Вот пример, где я добавляю домен text-shadow эффект от второй статьи в сериале к background техника анимации из первой статьи при использовании 3D-трюка, который мы только что рассмотрели:

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

Позвольте мне закончить эту статью эффектом последнего наведения, в котором я комбинирую фон, клип-путь и тире. perspective для имитации другого 3D-эффекта:

Я применил тот же эффект к изображениям, и результат был достаточно хорош для имитации 3D с одним элементом:

Хотите поближе взглянуть на то, как работает последняя демонстрация? Я что-то написал на нем.

Подведение итогов

Уф, мы закончили! Я знаю, это очень сложный CSS, но (1) мы находимся на правильном веб-сайте для такого рода вещей, и (2) цель состоит в том, чтобы вывести наше понимание различных свойств CSS на новый уровень, позволив им взаимодействовать с друг друга.

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

---

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

• Коинсмарт. Лучшая в Европе биржа биткойнов и криптовалют.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. БЕСПЛАТНЫЙ ДОСТУП.
• КриптоХок. Альткоин Радар. Бесплатная пробная версия.
• Источник: https://css-tricks.com/css-hover-effects-background-masks-3d/