Плавні градієнти
У CSS ви не можете плавно змінювати фоновий градієнт. Було б непогано, якби ви могли:
.gradient {
background-image: linear-gradient(
to right,
hsl(211, 100%, 50%),
hsl(179, 100%, 30%)
);
transition: background-image 0.5s linear;
}
.gradient:hover {
background-image: linear-gradient(
to bottom,
hsl(344, 100%, 50%),
hsl(31, 100%, 40%)
);
}
Але немає. Він одразу переходить від одного градієнта до іншого, без плавного переходу між ними.
Тож давай ті спробуємо це виправити. Ми можемо досягти цього ефекту за допомогою псевдоелемента та зміни прозорості.
Спочатку застосовуємо один градієнт до елемента. Потім додамо до псевдоелементу стилі, щоб він зайняв весь простір і додамо другий градієнт. Щоб зробити плавний перехід між двома градієнтами, необхідно змінити прозорість псевдоелемента.
.gradient {
position: relative;
background-image: linear-gradient(
to right,
hsl(211, 100%, 50%),
hsl(179, 100%, 30%)
);
z-index: 1;
}
.gradient::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(
to bottom,
hsl(344, 100%, 50%),
hsl(31, 100%, 40%)
);
z-index: -1;
transition: opacity 0.5s linear;
opacity: 0;
}
.gradient:hover::before {
opacity: 1;
}
Псевдоелемент приховуємо за допомогою opacity: 0
. При наведенні, плавно змінюється на opacity: 1
. Це створює ілюзію зміни градієнта. Також потрібна невелика робота з z-index для забезпечення того, щоб псевдоелемент залишався розміщуватися за вмістом основного елемента.
На жаль, код виходить трохи більше. Але якщо вам потрібен цей ефект, використовуйте цей варіант, щоб його реалізувати.
Ознайомтеся з повним робочим прикладом: