CSS function cross-fade()
Опис
cross-fade() - це CSS-функція, яка дозволяє створювати плавний перехід між двома зображеннями. Вона змішує ці зображення, створюючи ефект плавної зміни від одного зображення до іншого. Цей метод використовується для створення привабливих та ефектних переходів на веб-сайтах.
Для використання cross-fade(), ви передаєте два зображення як аргументи функції. Опціонально, ви можете вказати параметр percentage, який визначає прозорість переходу між зображеннями. Значення percentage вказує, як сильно перше зображення змішується з другим у перехресному змішуванні.
Приклад використання:
background-image: cross-fade(url("image1.jpg"), url("image2.jpg"), 50%);
Цей приклад створює плавний перехід між "image1.jpg" та "image2.jpg" з 50% прозорістю. Це додає візуальну динаміку до зображень, забезпечуючи зміну одного зображення в інше плавно та ефектно.
| Порада: | Використовуйте зображення зі схожими розмірами та відносно однаковою пропорцією, щоб отримати кращий ефект перехресного змішування. |
| Порада: | Експериментуйте з різними значеннями |
| Порада: | Переконайтеся, що зображення мають прозорий фон або використовуйте прозорість альфа-каналу для досягнення кращих результатів. |
| Нотатка: |
|
Синтаксис
cross-fade( <image> , <image> [, <percentage> ]);<image>Зображення, яке буде перехресно змішане (cross-faded). Вказується за допомогою URL-адреси зображення.
<percentage>Опціональне значення від
0%до100%, що вказує на прозорість перехресного змішування зображень. За замовчуванням -100%(повна видимість першого зображення).
Переглядачі
| Переглядач | ||||
|---|---|---|---|---|
17 |
10 |
15 |
79 |
| Переглядач | |||
|---|---|---|---|
4.4 |
18 |
9.3 |
Мобільних переглядачів ще не додано.
Приклади
Наведіть курсор на елемент, щоб побачити зміну.
Один з елементів використовує функцію cross-fade() для зміни фонового зображення.