30 tháng 4 năm 2024 - Công nghệ thông tin
Bài viết này sẽ tập trung vào cách sử dụng chỉ CSS để tạo hiệu ứng chuyển đổi chữ và hình ảnh trên một trang web. Chuyển đổi chữ thường được áp dụng cho việc phát thanh toàn trang, trong khi chuyển đổi hình ảnh phù hợp để trình chiếu liên tục một loạt hình ảnh trong một khu vực cố định.
m88vin - cổng game quốc tế 1. Chuyển đổi chữ
Chức năng chuyển đổi chữ là hiển thị lặp lại vô tận một nhóm chữ theo chiều ngang hoặc dọc.
Một ví dụ về hiệu ứng chuyển đổi chữ theo chiều dọc có thể trông như sau:
Dưới đây là mã nguồn hoàn chỉnh cho hiệu ứng này:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chuyển Đổi Chữ</title>
<style>
:root {
/* Số lượng mục chuyển đổi */
--s: 6;
/* Chiều cao của mỗi mục */
--h: 36;
/* Thời gian hoạt ảnh đơn */
--speed: 3s;
}
.container {
width: 200px;
height: calc(var(--h) * 1px);
line-height: calc(var(--h) * 1px);
border-radius: 4px;
border: 1px solid darkgray;
overflow: hidden;
}
ul {
margin-top: auto;
margin-bottom: auto;
animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
white-space: nowrap;
list-style: none;
animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, calc(var(--s) * var(--h) * -1px));
}
}
@keyframes liMove {
0% {
transform: translate(0, 0);
}
80%, 100% {
transform: translate(0, calc(var(--h) * -1px));
}
}
</style>
</head>
<body>
<div class="container">
<ul style="--s: 4">
<li>Chuyển Đổi Chữ 1</li>
<li>Chuyển Đổi Chữ 2</li>
<li>Chuyển Đổi Chữ 3</li>
<li>Chuyển Đổi Chữ 4</li>
<!-- Thêm mục đầu tiên vào cuối danh sách -->
<li>Chuyển Đổi Chữ 1</li>
</ul>
</div>
</body>
</html>
Xem trực tiếp kết quả: Có thể thấy rằng hoạt ảnh khung hình có thể tạo ra hiệu ứng chuyển đổi tổng thể.
ul {
animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, calc(var(--s) * var(--h) * -1px));
}
}
Hoạt ảnh chuyển đổi giữa các trạng thái giúp quá trình chuyển tiếp mượt mà hơn.
ul li {
animation: liMove calc(var(--speed)) infinite;
}
@keyframes liMove {
0% {
transform: translate(0, 0);
}
80%, 100% {
transform: translate(0, calc(var(--h) * -1px));
}
}
Trong cấu trúc HTML, thêm mục đầu tiên vào cuối danh sách giúp vòng lặp trở nên mượt mà và liên tục.
<ul style="--s: 4">
<!-- ... -->
<!-- Thêm mục đầu tiên vào cuối danh sách -->
<li>Chuyển Đổi Chữ 1</li>
</ul>
2. Chuyển đổi hình ảnh
Chữ có thể được chuyển đổi bằng hoạt ảnh CSS, và hình ảnh cũng vậy.
Trước đó chúng ta đã xem xét chuyển đổi chữ theo chiều dọc, bây giờ hãy xem làm thế nào để chuyển đổi hình ảnh theo chiều ngang.
Một ví dụ về hiệu ứng chuyển đổi hình ảnh theo chiều ngang có thể trông như sau:
Dưới đây là mã nguồn hoàn chỉnh cho hiệu ứng này:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chuyển Đổi Hình Ảnh</title>
<style>
:root {
/* Số lượng mục chuyển đổi */
--s: 6;
/* Chiều rộng của mỗi mục */
--w: 360;
/* Thời gian hoạt ảnh đơn */
--speed: 3s;
}
.container {
margin: auto;
width: calc(var(--w) * 1px);
height: 280px;
line-height: 280px;
border-radius: 4px;
border: 1px solid darkgray;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
flex-shrink: 0;
width: 100%;
height: 100%;
white-space: nowrap;
list-style: none;
animation: liMove calc(var(--speed)) infinite;
}
ul li img {
width: 100%;
height: 100%;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(calc(var(--s) * var(--w) * -1px), 0);
}
}
@keyframes liMove {
0% {
transform: translate(0, 0);
}
80%, 100% {
transform: translate(calc(var(--w) * -1px), 0);
}
}
</style>
</head>
<body>
<div class="container">
<ul style="--s: 3">
<li><img src="ảnh1.jpg"></li>
<li><img src="ảnh2.jpg"></li>
<li><img src="ảnh3.jpg"></li>
<!-- Thêm mục đầu tiên vào cuối danh sách -->
<li><img src="ảnh1.jpg"></li>
</ul>
</div>
</body>
</html>
Xem trực tiếp kết quả: Có thể thấy rằng mã nguồn này tương tự như mã nguồn chuyển đổi chữ trước đó, nhưng thay vì dịch chuyển theo chiều dọc, nó dịch chuyển theo chiều ngang.
3. Kết luận
Để tóm tắt các điểm chính trong việc thực hiện chuyển đổi chữ và hình ảnh:
- Sử dụng hoạt ảnh khung hình để tạo hiệu ứng chuyển đổi lặp lại tổng thể.
- Sử dụng hoạt ảnh chuyển đổi giữa các trạng thái để đạt được sự chuyển tiếp mượt mà.
- Trong cấu trúc HTML, thêm mục đầu tiên vào cuối danh sách giúp các mục nối tiếp nhau một cách liền mạch hơn.
Mã nguồn đầy đủ của bài viết đã được lưu trữ trên GitHub cá nhân của tôi, mọi người có thể theo dõi hoặc Fork dự án.
[1] SegmentFault: Chuyển đổi chữ và hình ảnh? CSS không thành vấn đề - 