Cách kiểm tra ảnh động CSS của bạn bằng Chrome DevTools
Hoạt ảnh CSS, được thực hiện đúng cách, có thể nâng trang web của bạn lên một cấp độ khác. Tuy nhiên, việc tạo những hoạt ảnh này có thể khó khăn nếu không có các công cụ cung cấp khả năng kiểm soát tốt đối với chúng. Điều gì sẽ xảy ra nếu có một cách để biết chính xác điều gì đang xảy ra ở mỗi bước trong hoạt ảnh của bạn?
Bằng cách sử dụng chức năng DevTools có trong cả Google Chrome và Mozilla Firefox, người ta có thể hiểu rõ hơn về các tác phẩm hoạt hình của họ và sao chép những tác phẩm được tìm thấy trong các trang web khác nhau.
Gỡ lỗi hoạt ảnh cơ bản với DevTools
Thật vậy, Công cụ dành cho nhà phát triển của Google Chrome cung cấp một loạt tính năng hữu ích để gỡ lỗi các khía cạnh khác nhau của quá trình phát triển web, bao gồm nhưng không giới hạn ở CSS. Công cụ đa năng này cho phép người dùng khám phá và phân tích hiệu suất trang web của họ, xác định các vấn đề tiềm ẩn và tối ưu hóa các yếu tố thiết kế. Khi bắt đầu, người ta có thể thấy hữu ích khi sử dụng Công cụ dành cho nhà phát triển để kiểm tra và điều tra các hoạt ảnh trong dự án của họ.
Mã nguồn của những hình minh họa này có thể được truy cập thông qua kho lưu trữ GitHub, đóng vai trò là kho lưu trữ kỹ thuật số cho các dự án phát triển phần mềm và tạo điều kiện cộng tác giữa các nhà phát triển bằng cách cung cấp các tính năng và công cụ kiểm soát phiên bản để quản lý các thay đổi được thực hiện đối với cơ sở mã.
Xác định ảnh động bằng HTML và CSS
phần tử div và phần tử nút. Ngoài ra, nó còn kết hợp một tài liệu CSS có tên “style.css”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box"></div>
<button>Test Button</button>
</body>
</html>
Để áp dụng giao diện nhất quán cho cả hai thành phần này, cần phải tạo tệp CSS (Cascading Style Sheets) trong cùng thư mục với tài liệu HTML. Tệp này phải chứa mã sau:
#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000ms ease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1px solid black;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
cursor: pointer;
}
button:hover {
background-color: black;
color: white;
}
@keyframes rotateAndChangeColor {
0% {
rotate: 0deg;
background: red;
}
10% {
background: green;
}
40% {
background: blue;
}
70% {
background: yellow;
}
100% {
rotate: 360deg;
background: red;
}
}
Những phong cách này tạo ra hai thành phần:
Một hộp hoạt hình hấp dẫn về mặt trực quan, xoay và thay đổi màu sắc khi tải trang web.
Thành phần giao diện người dùng được gọi là “nút” trải qua quá trình chuyển đổi trực quan bằng cách thay đổi “màu nền” của nó để phản hồi thông tin đầu vào của người dùng, đặc biệt khi con trỏ hoặc con trỏ được đặt phía trên nó và không tiếp xúc với bất kỳ đối tượng nào khác trên màn hình. Thay đổi này xảy ra thông qua quá trình"di chuột", kích hoạt một sự kiện trong trình duyệt hoặc phần mềm ứng dụng khiến giao diện của nút bị sửa đổi tạm thời.
Việc sử dụng lệnh CSS @keyframes cho phép hoạt ảnh của hộp màu đỏ, trong khi nút sử dụng chuyển đổi để chuyển đổi nó. Việc so sánh các kỹ thuật này có thể được tạo điều kiện thuận lợi thông qua việc kiểm tra các ứng dụng tương ứng của chúng trong Công cụ dành cho nhà phát triển của trình duyệt.
Kiểm tra ảnh động bằng DevTools
Để được phép sử dụng tab “Hoạt ảnh” trong Công cụ dành cho nhà phát triển Chrome, vui lòng làm theo các bước sau:
Thực hiện nhấp chuột phải vào trang web hiện tại của bạn sẽ gọi menu ngữ cảnh, trình bày các tùy chọn khác nhau để thao tác hoặc tương tác với nội dung hiển thị trên màn hình.
⭐Nhấp vàoKiểm tra.
Vui lòng nhấp vào ba dấu chấm dọc nằm ở góc trên bên phải màn hình của bạn.
Truy cập tùy chọn “Hoạt hình” bằng cách điều hướng đến danh mục “Công cụ khác” và chọn nó từ đó.
Hành động này sẽ hiển thị hình ảnh động trực quan ở phần dưới của giao diện, cho phép người dùng truy cập và thao tác các hiệu ứng này.
Bất kỳ hiệu ứng hình ảnh nào hiển thị trên trang web này sẽ được hiển thị trong phần này. Trong trường hợp bạn tải lại trang và đặt con trỏ lên phần tử được chỉ định, các chuỗi hoạt ảnh nói trên sẽ xuất hiện trong tab “Hoạt ảnh” được chỉ định khi làm mới vùng hiển thị nội dung.
Thật vậy, khi nhấp vào bất kỳ hoạt ảnh nào trong số này, chẳng hạn như hoạt ảnh của hộp, trình duyệt sẽ hiển thị các khung hình chính theo cách minh họa chiến lược triển khai của nó.
Công cụ dành cho nhà phát triển hiển thị tổng quan về tất cả các hoạt ảnh được liên kết với thành phần đã chọn, vì chỉ có một quy trình hoạt ảnh được mô tả cho vùng chứa màu đỏ-xoay và thay đổi màu sắc-do đó, chỉ các chi tiết cụ thể liên quan đến hoạt ảnh này mới được hiển thị trong giao diện.
Bạn có thể điều chỉnh vị trí của đầu phát dọc theo dòng thời gian để kiểm soát tốc độ của chuỗi hình ảnh, đẩy nhanh hoặc trì hoãn tiến trình của nó tùy theo sở thích của bạn. Ngoài ra, hoạt ảnh có thể bị tạm dừng tại những thời điểm cụ thể bằng cách chuyển đổi giữa biểu tượng phát và tạm dừng, giúp bạn kiểm soát tốt hơn trải nghiệm xem. Hơn nữa, tỷ lệ phần trăm được cung cấp ở đầu dòng thời gian cho phép bạn điều khiển nhịp độ của hoạt ảnh, cho phép giảm tốc độ 25% hoặc tốc độ thậm chí chậm hơn 10%.
Khi kiểm tra hành vi của một nút bằng Công cụ dành cho nhà phát triển, người ta có thể quan sát các thuộc tính cụ thể góp phần chuyển đổi hình ảnh của nút đó, chẳng hạn như màu sắc và màu nền.
Tiện ích này cấp cho bạn khả năng sửa đổi hoạt ảnh của mình để hiểu toàn diện về chức năng của chúng. Nó cho phép bạn chẩn đoán và giải quyết mọi vấn đề có thể phát sinh với trang web của bạn, nếu có bất kỳ vấn đề nào xảy ra.
Ví dụ về hoạt ảnh nâng cao
Kết hợp đánh dấu được cung cấp trong phần tử của tài liệu HTML, như sau:
<div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>
Kết hợp đoạn mã được cung cấp vào phần của tệp CSS của bạn và sau đó thay thế mọi kiểu hiện có trong tệp đó bằng mã mới được thêm vào.
.move-me {
display: inline-block;
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8s steps(4, end) infinite;
}
.move-me-2 {
animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
animation: move-in-steps 8s infinite;
}
body {
padding: 20px;
}
@keyframes move-in-steps {
0% {
left: 0;
background: blue;
}
100% {
left: 100%;
background: red;
}
}
Việc áp dụng hoạt ảnh chuyển động theo từng bước cho tất cả các phần tử div bao gồm việc chuyển đổi cả vị trí và màu nền của chúng. Hơn nữa, các hình ảnh động riêng biệt được sử dụng để kiểm soát số bước của từng hộp riêng lẻ.
Khi hộp thứ ba di chuyển theo chiều ngang về phía cạnh phải của màn hình một cách nhất quán, cặp hộp ban đầu sẽ tiến lên đồng thời hai bước, cuối cùng dẫn đến việc chúng đồng thời đến điểm cuối của khu vực hiển thị (theo đó bắt đầu hộp thứ hai đứng trước hộp đầu tiên).
Bằng cách truy cập tab “Hoạt ảnh” trong ứng dụng Công cụ dành cho nhà phát triển và làm mới trang web, người ta có thể có quyền truy cập vào thông tin chi tiết toàn diện về bất kỳ hoạt ảnh nào có trên trang web.
Trong suốt một khoảng thời gian được chia sẻ, nhiều thành phần hoạt hình tồn tại song song. Cụ thể, trong bối cảnh này, màu sắc nền thống nhất và tọa độ không gian của từng vùng trong số ba vùng chứa tương ứng trải qua hoạt ảnh đồng thời.
Điều đáng nói là các điểm đánh dấu dọc theo mỗi đường dẫn hoạt hình cho biết điểm bắt đầu và điểm kết thúc của mỗi lần lặp trong trình tự lặp lại.
Các nút trống đóng vai trò là các khung hình chính thiết yếu trong chuỗi hoạt ảnh của bạn, trong khi các nút tương ứng có màu sắc đầy đủ biểu thị cả điểm bắt đầu và điểm kết thúc của hoạt ảnh. Đáng chú ý là mỗi lần lặp lại hoạt ảnh sẽ hiển thị các phần tử nút tối.
Tóm lại, DevTools cung cấp giao diện thân thiện với người dùng để chỉnh sửa hoạt ảnh thông qua quy trình tương tự được sử dụng để điều chỉnh các thuộc tính CSS tiêu chuẩn. Mọi sửa đổi được thực hiện thông qua giao diện người dùng hoạt ảnh đều được phản ánh theo thời gian thực trong cả phần kiểu nội tuyến của tab Kiểu và ngược lại. Điều này cho phép thử nghiệm và sao chép các chỉnh sửa trên dự án thực tế một cách thuận tiện.
Sử dụng Chrome DevTools để gỡ lỗi CSS của bạn
Chức năng DevTools trong trình duyệt Google Chrome đóng vai trò là tài nguyên hiệu quả cao để gỡ lỗi Cascading Style Sheets (CSS) của một người, bao gồm cả hoạt ảnh. Tính năng này cung cấp cái nhìn toàn diện về từng chuyển đổi và hoạt ảnh diễn ra trên một trang web cụ thể, cho phép người dùng xem xét kỹ lưỡng các hành động chính xác xảy ra trong thời gian thực.
Là một cá nhân thành thạo trong phát triển web, điều bắt buộc là người ta phải có hiểu biết toàn diện về tính năng Công cụ dành cho nhà phát triển của trình duyệt tương ứng của họ hoặc một giải pháp thay thế tương đương.