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">Hover over me!</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 секунду
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ