5.1 Зміна кольору
CSS-переходи (transitions) дозволяють анімувати зміни властивостей елементів, створюючи плавні візуальні ефекти. Зараз розглянемо, як використовувати переходи для зміни кольору, розміру та положення елементів, а також продемонструємо практичні приклади.
Зміна кольору елемента за допомогою CSS-переходів є одним із найпоширеніших застосувань. Це може включати зміну кольору тексту, фону або межі елемента.
Приклад 1: Зміна кольору фону
Цей приклад демонструє зміну кольору фону елемента при наведенні курсора:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Зміна кольору фону</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Пояснення коду:
.box: елемент із фіксованими розмірами та кольором фону.box:hover: при наведенні курсора на елемент колір фону плавно змінюється з синього на зелений за 1 секунду з функцією таймінгу ease
Приклад 2: Зміна кольору тексту
Цей приклад демонструє зміну кольору тексту елемента при наведенні курсора:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Зміна кольору тексту</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Наведи на мене!</div>
</body>
</html>
Пояснення коду:
.text: елемент із початковим кольором тексту.text:hover: при наведенні курсора колір тексту плавно змінюється з червоного на фіолетовий за 0.5 секунди з лінійною функцією таймінгу
5.2 Зміна розміру
Зміна розміру елементів за допомогою CSS-переходів може включати зміну ширини, висоти або обох розмірів одночасно.
Приклад 1: Зміна ширини
Цей приклад демонструє зміну ширини елемента при наведенні курсора:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Зміна ширини</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Пояснення коду:
.box: елемент із початковою шириною 100 пікселів-
.box:hover: при наведенні курсора ширина елемента плавно збільшується до 200 пікселів за 2 секунди з функцією таймінгуease-in-out
Приклад 2: Зміна висоти
Цей приклад демонструє зміну висоти елемента при наведенні курсора:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Зміна висоти</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Пояснення коду:
.box: елемент із початковою висотою 100 пікселів.box:hover: при наведенні курсора висота елемента плавно змінюється до 200 пікселів за 1.5 секунди з функцією таймінгуease
5.3 Зміна положення
Зміна положення елементів за допомогою CSS-переходів може включати переміщення елемента з використанням властивостей top, right, bottom, left або трансформацій translate.
Приклад 1: Переміщення з використанням left
Цей приклад демонструє переміщення елемента вправо при наведенні курсора з використанням властивості left:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Переміщення елемента</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Пояснення коду:
.box: елемент із початковою позицієюleft: 0.box:hover: при наведенні курсора елемент плавно переміщується вправо на 100 пікселів за 2 секунди
Приклад 2: Переміщення з використанням transform: translate
Цей приклад демонструє переміщення елемента вправо і вниз при наведенні курсора з використанням трансформації translate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Переміщення з transform: translate</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Пояснення коду:
.box: елемент із початковою трансформацієюtranslate(0, 0).box:hover: при наведенні курсора елемент плавно переміщується на 100 пікселів вправо і 50 пікселів вниз за 1 секунду
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ