5.1 Zmiana koloru
CSS przejścia (transitions) pozwalają animować zmiany właściwości elementów, tworząc płynne efekty wizualne. Teraz przyjrzymy się, jak używać przejść do zmiany koloru, rozmiaru i pozycji elementów, a także przedstawimy praktyczne przykłady.
Zmiana koloru elementu za pomocą CSS przejść jest jednym z najczęstszych zastosowań. Może to obejmować zmianę koloru tekstu, tła lub granic elementu.
Przykład 1: Zmiana koloru tła
Ten przykład pokazuje zmianę koloru tła elementu przy najechaniu kursorem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zmiana koloru tła</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>
Wyjaśnienie kodu:
.box: element o ustalonych wymiarach i kolorze tła.box:hover: przy najechaniu kursorem na element, kolor tła płynnie zmienia się z niebieskiego na zielony w 1 sekundę z funkcją timing ease
Przykład 2: Zmiana koloru tekstu
Ten przykład pokazuje zmianę koloru tekstu elementu przy najechaniu kursorem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zmiana koloru tekstu</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Najechać na mnie!</div>
</body>
</html>
Wyjaśnienie kodu:
.text: element z początkowym kolorem tekstu.text:hover: przy najechaniu kursorem kolor tekstu płynnie zmienia się z czerwonego na fioletowy w 0.5 sekundy z liniową funkcją timing
5.2 Zmiana rozmiaru
Zmiana rozmiaru elementów za pomocą CSS przejść może obejmować zmianę szerokości, wysokości lub obu wymiarów jednocześnie.
Przykład 1: Zmiana szerokości
Ten przykład pokazuje zmianę szerokości elementu przy najechaniu kursorem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zmiana szerokości</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>
Wyjaśnienie kodu:
.box: element o początkowej szerokości 100 pikseli-
.box:hover: przy najechaniu kursorem szerokość elementu płynnie zwiększa się do 200 pikseli w 2 sekundy z funkcją timingease-in-out
Przykład 2: Zmiana wysokości
Ten przykład pokazuje zmianę wysokości elementu przy najechaniu kursorem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zmiana wysokości</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>
Wyjaśnienie kodu:
.box: element o początkowej wysokości 100 pikseli.box:hover: przy najechaniu kursorem wysokość elementu płynnie zwiększa się do 200 pikseli w 1.5 sekundy z funkcją timingease
5.3 Zmiana pozycji
Zmiana pozycji elementów za pomocą CSS przejść może obejmować przemieszczanie elementu za pomocą właściwości
top, right, bottom, left lub transformacji translate.
Przykład 1: Przemieszczanie za pomocą left
Ten przykład pokazuje przemieszczanie elementu w prawo przy najechaniu kursorem za pomocą właściwości left:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przemieszczanie elementu</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>
Wyjaśnienie kodu:
.box: element o początkowej pozycjileft: 0.box:hover: przy najechaniu kursorem element płynnie przemieszcza się w prawo o 100 pikseli w 2 sekundy
Przykład 2: Przemieszczanie za pomocą transform: translate
Ten przykład pokazuje przemieszczanie elementu w prawo i w dół przy najechaniu kursorem za pomocą transformacji translate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przemieszczanie z 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>
Wyjaśnienie kodu:
.box: element z początkową transformacjątranslate(0, 0).box:hover: przy najechaniu kursorem element płynnie przemieszcza się o 100 pikseli w prawo i 50 pikseli w dół w 1 sekundę
GO TO FULL VERSION