5.1 Rəngin dəyişdirilməsi
CSS-keçidlər (transitions) elementlərin xüsusiyyətlərinin dəyişikliklərini animasiya etməyə imkan verir və hamar vizual effektlər yaradır. İndi biz keçidlərdən rəngin, ölçünün və elementlərin yerinin dəyişdirilməsi üçün necə istifadə olunacağını nəzərdən keçirəcəyik, eyni zamanda praktik nümunələr göstərəcəyik.
Elementin rənginin CSS-keçidlərdən istifadə etməklə dəyişdirilməsi ən çox yayılmış istifadə hallardan biridir. Buraya mətnin, fonun və ya elementin sərhədlərinin rənginin dəyişdirilməsi daxil ola bilər.
Nümunə 1: Fon rənginin dəyişdirilməsi
Bu nümunə elementin fon rənginin kursor üzərinə gətirildiyi zaman necə dəyişdiyini göstərir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fon rənginin dəyişdirilməsi</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>
Kodun izahı:
.box: sabit ölçüləri və fon rəngi olan element.box:hover: kursor elementin üzərində olduğu zaman fon rəngi mavi rəngdən yaşıl rəngə 1 saniyə ərzində "ease" zamanlama funksiyası ilə hamar şəkildə dəyişir
Nümunə 2: Mətn rənginin dəyişdirilməsi
Bu nümunə elementin mətn rənginin kursor üzərinə gətirildiyi zaman necə dəyişdiyini göstərir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mətn rənginin dəyişdirilməsi</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>
Kodun izahı:
.text: mətnin ilkin rəngi olan element.text:hover: kursor üzərinə gətirildiyi zaman mətn rəngi qırmızıdan bənövşəyi rəngə 0.5 saniyə ərzində "linear" zamanlama funksiyası ilə hamar şəkildə dəyişir
5.2 Ölçülərin dəyişdirilməsi
CSS-keçidlərinin köməyi ilə elementlərin ölçülərinin dəyişdirilməsi eni, hündürlüyü və ya hər ikisinin birdən dəyişdirilməsini əhatə edə bilər.
Nümunə 1: Enin dəyişdirilməsi
Bu nümunə elementin eninin kursor üzərinə gətirildikdə necə dəyişdiyini göstərir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enin dəyişdirilməsi</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>
Kodun izahı:
.box: başlanğıc eni 100 piksel olan element-
.box:hover: kursor üzərinə gətirildikdə elementin eni 2 saniyə ərzində funksiyanın vaxtlamaease-in-outilə yavaş-yavaş artır və 200 piksel olur
Nümunə 2: Hündürlüyün dəyişdirilməsi
Bu nümunə elementin hündürlüyünün kursor üzərinə gətirildikdə necə dəyişdiyini göstərir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hündürlüyün dəyişdirilməsi</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>
Kodun izahı:
.box: başlanğıc hündürlüyü 100 piksel olan element.box:hover: kursor üzərinə gətirildikdə elementin hündürlüyü 1.5 saniyə ərzində funksiyanın vaxtlamaeaseilə yavaş-yavaş artır və 200 piksel olur
5.3 Mövqenin dəyişdirilməsi
CSS-keçidlərdən istifadə edərək elementlərin mövqeyinin dəyişdirilməsi top, right, bottom, left xüsusiyyətləri və ya translate transformasiyalarından istifadə etməklə elementin hərəkətini əhatə edə bilər.
Nümunə 1: left istifadə edərək hərəkət
Bu nümunə göstərir ki, left xüsusiyyəti ilə hover zamanı element sağa necə hərəkət edir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementin hərəkəti</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>
Kod açıqlaması:
.box: ilkin mövqeyileft: 0olan element.box:hover: hover (üzərinə gətirdikdə) zamanı element 2 saniyə ərzində 100 piksel sağa hərəkət edir
Nümunə 2: transform: translate istifadə edərək hərəkət
Bu nümunə göstərir ki, translate transformasiyası ilə hover zamanı element sağa və aşağıya necə hərəkət edir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform: translate ilə hərəkət</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>
Kod açıqlaması:
.box: ilkin transformasiyasıtranslate(0, 0)olan element.box:hover: hover (üzərinə gətirdikdə) zamanı element 1 saniyə ərzində 100 piksel sağa və 50 piksel aşağıya hərəkət edir
GO TO FULL VERSION