Зараз ми розглянули серію публікацій про цікаві підходи до ефектів наведення CSS. Ми почали з а купа прикладів, які використовують CSS background
властивості, потім перейшов до text-shadow
майно де ми технічно не використовували жодних тіней. Ми також об’єднали їх із змінними CSS та calc()
оптимізувати код і полегшити керування ним.
У цій статті ми побудуємо ці дві статті, щоб створити ще більш складні CSS-анімації наведення. Ми говоримо про обрізання фону, маски CSS і навіть про те, щоб намокнути ноги за допомогою 3D-перспектив. Іншими словами, цього разу ми розглянемо передові методики та розширимо межі того, що може робити CSS за допомогою ефектів наведення!
Серія Cool Hover Effects:
- Класні ефекти наведення, які використовують фонові властивості
- Класні ефекти наведення, які використовують тінь тексту CSS
- Класні ефекти наведення, які використовують обрізання фону, маски та 3D (ти тут!)
Ось лише смак того, що ми робимо:
Використання ефектів наведення background-clip
Давайте поговоримо про background-clip
. Ця властивість CSS приймає a text
значення ключового слова що дозволяє нам застосовувати градієнти до текст елемента замість фактичного фон.
Тож, наприклад, ми можемо змінити колір тексту при наведенні курсора так само, як і за допомогою color
властивість, але таким чином ми анімуємо зміну кольору:
Все, що я зробив, це додав background-clip: text
до елемента і transition
background-position
. Не має бути складнішим за це!
Але ми можемо зробити краще, якщо поєднаємо кілька градієнтів з різними значеннями відсікання фону.
У цьому прикладі я використовую два різних градієнта та два значення з background-clip
. Перший фоновий градієнт обрізається до тексту (завдяки text
значення), щоб встановити колір при наведенні курсора, тоді як другий градієнт фону створює нижнє підкреслення (завдяки padding-box
значення). Все інше прямо скопійовано з роботу, яку ми виконали в першій статті цієї серії.
Як щодо ефекту наведення, коли панель ковзає зверху вниз так, ніби текст сканується, а потім забарвлюється:
Цього разу я змінив розмір першого градієнта, щоб створити лінію. Потім я пересуваю його іншим градієнтом, який оновлює колір тексту, щоб створити ілюзію! Ви можете уявити, що відбувається в цій ручці:
Ми лише подряпали поверхню того, що ми можемо зробити з нашим background-clip
повноваження ping! Однак цю техніку, ймовірно, не варто використовувати у виробництві, оскільки, як відомо, Firefox має a багато повідомлених помилок відноситься до 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
вже змінено при наведенні.
Нарешті, ми застосовуємо вицвітання до кольору та a background-color
, щоб створити частину анімації, яку потрібно навести. Я знаю, це може бути складно зрозуміти, але ви можете краще уявити фокус, використовуючи різні кольори:
Наведіть вказівник миші багато разів, і ви побачите властивості, які анімуються при наведенні і ті, що анімуються при наведенні курсора. Тоді ви зможете зрозуміти, як ми досягли двох різних анімацій для одного ефекту наведення.
Let's not forget техніка DRY перемикання, яку ми використовували у попередніх статтях цієї серії, щоб допомогти зменшити кількість коду, використовуючи лише одну змінну для перемикача:
.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
property так, тож ви побачите, що те, що ми робимо далі, досить просто.
Почнемо з створення фантастичного підкреслення.
Я використовую background
щоб створити зигзагоподібну нижню межу в цій демонстрації. Якби я хотів застосувати анімацію до цього підкреслення, було б нудно робити це, використовуючи лише властивості фону.
Введіть CSS mask
.
Код може виглядати дивно, але логіка залишається такою ж, як і з усіма попередніми фоновими анімаціями. The 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
Останнім кроком є застосування a 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%
)
Це все! Ми щойно створили тривимірний прямокутник із лише двома градієнтами та а 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-трюки. Ти повинен отримати інформаційний бюлетень.
- "
- 2D
- 3d
- a
- МЕНЮ
- просунутий
- попереду
- ВСІ
- Дозволити
- дозволяє
- Альфа
- вже
- кількість
- Інший
- прикладної
- Застосовувати
- підходи
- ПЛОЩА
- навколо
- стаття
- статті
- фон
- оскільки
- між
- Біт
- border
- Пробій
- будувати
- Створюємо
- виклик
- зміна
- Chrome
- ближче
- закриття
- код
- збір
- поєднання
- комбінований
- порівняний
- Доповнення
- комплекс
- складається
- конфігурація
- зміст
- продовжувати
- координувати
- обкладинка
- створювати
- створює
- виготовлений на замовлення
- Тире
- затримка
- деталь
- DID
- різний
- Ні
- легко
- ефект
- ефекти
- елементи
- і т.д.
- все
- приклад
- Приклади
- Крім
- експеримент
- дослідити
- ноги
- Рисунок
- Firefox
- Перший
- після
- слідує
- формат
- від
- далі
- отримання
- дає
- Погляд
- мета
- буде
- добре
- зелений
- траплятися
- допомога
- тут
- приховувати
- Як
- How To
- Однак
- HTTPS
- зображень
- неможливе
- В інших
- зростаючий
- самостійно
- натхнення
- мить
- взаємодіючих
- питання
- IT
- Знати
- відомий
- УЧИТЬСЯ
- вчений
- вивчення
- рівні
- Ймовірно
- Лінія
- зв'язку
- трохи
- Довго
- подивитися
- подивився
- шукати
- made
- зробити
- РОБОТИ
- Робить
- управляти
- вдалося
- маска
- маски
- Матерія
- засоби
- може бути
- більше
- найбільш
- рухатися
- руху
- Mozilla
- множинний
- відкрити
- Оптимізувати
- Інше
- частина
- ідеальний
- перспективи
- Play
- точок
- Пости
- практика
- досить
- попередній
- Production
- властивості
- власність
- досягати
- реалізувати
- зменшити
- прогін
- Safari
- то ж
- Серія
- комплект
- тінь
- Форма
- аналогічний
- простий
- один
- Розмір
- So
- solid
- деякі
- що в сім'ї щось
- Простір
- етапи
- старт
- почалася
- Штати
- Як і раніше
- підтримка
- поверхню
- перемикач
- тактика
- взяття
- балаканина
- говорити
- методи
- Команда
- річ
- речі
- Мислення
- три
- через
- час
- times
- разом
- топ
- торкатися
- перехід
- прозорість
- прозорий
- розуміти
- розуміння
- Оновити
- us
- використання
- значення
- видимий
- хотів
- веб-сайт
- Що
- Що таке
- в той час як
- без
- слова
- Work
- працює
- б
- вашу