5.1 Thay đổi màu sắc
CSS transitions cho phép bạn tạo hiệu ứng chuyển động cho sự thay đổi của các thuộc tính phần tử, tạo ra những hiệu ứng hình ảnh mượt mà. Giờ chúng ta sẽ xem cách sử dụng transitions để thay đổi màu sắc, kích thước và vị trí của các phần tử, cũng như đưa ra các ví dụ thực tiễn.
Thay đổi màu sắc của phần tử bằng CSS transitions là một trong những ứng dụng phổ biến nhất. Điều này có thể bao gồm thay đổi màu sắc của văn bản, nền hoặc đường viền của phần tử.
Ví dụ 1: Thay đổi màu nền
Ví dụ này minh họa việc thay đổi màu nền của phần tử khi hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thay đổi màu nền</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>
Giải thích mã:
.box: phần tử với kích thước cố định và màu nền ban đầu.box:hover: khi hover, màu nền thay đổi từ xanh dương sang xanh lá cây trong 1 giây vớieasetiming function
Ví dụ 2: Thay đổi màu văn bản
Ví dụ này minh họa việc thay đổi màu văn bản của phần tử khi hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thay đổi màu văn bản</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>
Giải thích mã:
.text: phần tử với màu văn bản ban đầu.text:hover: khi hover, màu văn bản thay đổi từ đỏ sang tím trong 0.5 giây với linear timing function
5.2 Thay đổi kích thước
Thay đổi kích thước các phần tử bằng CSS transitions có thể bao gồm thay đổi chiều rộng, chiều cao hoặc cả hai kích thước cùng một lúc.
Ví dụ 1: Thay đổi chiều rộng
Ví dụ này minh họa việc thay đổi chiều rộng của phần tử khi hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thay đổi chiều rộng</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>
Giải thích mã:
.box: phần tử với chiều rộng ban đầu 100 pixels-
.box:hover: khi hover, chiều rộng của phần tử tăng lên 200 pixels trong 2 giây vớiease-in-outtiming function
Ví dụ 2: Thay đổi chiều cao
Ví dụ này minh họa việc thay đổi chiều cao của phần tử khi hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thay đổi chiều cao</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>
Giải thích mã:
.box: phần tử với chiều cao ban đầu 100 pixels.box:hover: khi hover, chiều cao của phần tử tăng lên 200 pixels trong 1.5 giây vớieasetiming function
5.3 Thay đổi vị trí
Thay đổi vị trí của các phần tử bằng CSS transitions có thể bao gồm việc di chuyển phần tử bằng cách sử dụng các thuộc tính top, right, bottom, left hoặc các phép biến đổi translate.
Ví dụ 1: Di chuyển bằng cách sử dụng left
Ví dụ này minh họa việc di chuyển phần tử sang bên phải khi hover bằng cách sử dụng thuộc tính left:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Di chuyển phần tử</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>
Giải thích mã:
.box: phần tử với vị trí ban đầuleft: 0.box:hover: khi hover, phần tử di chuyển mượt mà sang phải 100 pixels trong 2 giây
Ví dụ 2: Di chuyển bằng cách sử dụng transform: translate
Ví dụ này minh họa việc di chuyển phần tử sang phải và xuống dưới khi hover bằng cách sử dụng phép biến đổi translate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Di chuyển bằng 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>
Giải thích mã:
.box: phần tử với phép biến đổi ban đầutranslate(0, 0).box:hover: khi hover, phần tử di chuyển mượt mà 100 pixels sang phải và 50 pixels xuống dưới trong 1 giây
GO TO FULL VERSION