Trong bài đăng này, hãy tìm hiểu cách tạo một số ảnh động phổ biến trên CodePen. Tất cả ảnh động này đều sử dụng kỹ thuật biểu diễn được thảo luận trong các bài viết khác trong phần này.
Hãy xem bài viết Tại sao một số ảnh động bị chậm? để tìm hiểu lý thuyết đằng sau các đề xuất này và Hướng dẫn về ảnh động để biết các mẹo thiết thực.
Ảnh động về quá trình tải trình hướng dẫn
Xem ảnh động đang tải Trình hướng dẫn trên CodePen
Ảnh động tải này được tạo hoàn toàn bằng CSS. Hình ảnh cùng với tất cả hoạt ảnh đã được tạo trong CSS và HTML, không có hình ảnh hoặc JavaScript. Để hiểu cách tạo và hoạt động của phần mềm, bạn có thể sử dụng Công cụ của Chrome cho nhà phát triển.
Kiểm tra ảnh động bằng Công cụ của Chrome cho nhà phát triển
Khi ảnh động đang chạy, hãy mở thẻ Hiệu suất trong Công cụ của Chrome cho nhà phát triển rồi ghi lại một vài giây ảnh động. Bạn sẽ thấy trong Tóm tắt, trình duyệt không thực hiện bất kỳ thao tác Bố cục hoặc Sơn nào khi chạy ảnh động này.
Để tìm hiểu cách tạo ảnh động này mà không cần tạo bố cục và tô màu, kiểm tra mọi phần tử chuyển động trong Công cụ của Chrome cho nhà phát triển. Bạn có thể sử dụng Bảng điều khiển ảnh động để tìm các thành phần ảnh động, việc nhấp vào một phần tử bất kỳ sẽ làm nổi bật phần tử đó trong DOM.
Ví dụ: hãy chọn hình tam giác, và xem cách hộp của nguyên tố biến đổi trong quá trình di chuyển vào không khí, khi nó quay rồi trở lại vị trí bắt đầu.
Khi phần tử vẫn đang được chọn, hãy xem Bảng điều khiển kiểu. Tại đó, bạn có thể thấy CSS vẽ hình dạng hình tam giác, và ảnh động đang được sử dụng.
Cách hoạt động
Hình tam giác được tạo bằng cách sử dụng phần tử giả ::after để thêm nội dung đã tạo,
sử dụng đường viền để tạo hình dạng.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
Hoạt ảnh được thêm với dòng CSS sau đây
animation: path_triangle 10s ease-in-out infinite;
Trong Công cụ của Chrome cho nhà phát triển, bạn có thể tìm thấy các khung hình chính bằng cách cuộn xuống Bảng điều khiển kiểu.
Ở đó, bạn sẽ thấy ảnh động được tạo bằng cách sử dụng transform để thay đổi vị trí của phần tử và xoay phần tử đó.
Thuộc tính transform là một trong các thuộc tính được mô tả trong Hướng dẫn về ảnh động,
vốn không khiến trình duyệt thực hiện các thao tác bố cục hoặc vẽ (đây là nguyên nhân chính gây ra hoạt ảnh chậm).
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
Mỗi phần chuyển động khác nhau của ảnh động này sử dụng kỹ thuật tương tự nhau. Kết quả là một ảnh động phức tạp chạy mượt mà.
Vòng tròn phát ra
Xem Vòng tròn phát xung trên CodePen
Loại ảnh động này đôi khi được dùng để thu hút sự chú ý vào nội dung nào đó trên trang. Để hiểu ảnh động, bạn có thể sử dụng Công cụ cho nhà phát triển của Firefox.
Kiểm tra ảnh động bằng Công cụ của Firefox
Khi ảnh động đang chạy, hãy mở thẻ Hiệu suất trong Công cụ của Firefox rồi ghi lại một vài giây ảnh động. Dừng bản ghi. trong thác nước, bạn sẽ thấy không có mục nào cho Tính toán lại kiểu. Giờ đây, bạn biết rằng ảnh động này không gây ra việc tính toán lại kiểu, từ đó giúp bạn thực hiện các thao tác bố cục và tô màu.
Ở trong Firefox Công cụ cho nhà phát triển, hãy kiểm tra vòng tròn để xem ảnh động này hoạt động như thế nào.
<div> với lớp pulsating-circle sẽ đánh dấu vị trí của vòng tròn,
tuy nhiên, biểu đồ này không tự vẽ một vòng tròn.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Vòng tròn hiển thị và ảnh động sẽ được tạo ra bằng cách sử dụng các phần tử giả ::before và ::after.
Phần tử ::before tạo ra vòng mờ mở rộng ra bên ngoài vòng tròn màu trắng,
bằng cách sử dụng ảnh động có tên pulse-ring
Tạo hiệu ứng động cho transform: scale và opacity.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
Một cách khác để xem thuộc tính nào đang được tạo ảnh động là chọn bảng điều khiển Animations trong Công cụ cho nhà phát triển của Firefox. Sau đó, bạn sẽ thấy hình ảnh trực quan về các ảnh động đang được sử dụng, và các thuộc tính đang được tạo ảnh động.
Vòng tròn màu trắng được tạo và tạo ảnh động bằng cách sử dụng phần tử giả ::after.
Ảnh động pulse-dot sử dụng transform: scale để tăng và thu nhỏ dấu chấm trong ảnh động.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
Ảnh động như thế này có thể được dùng ở nhiều vị trí trong ứng dụng của bạn, điều quan trọng là những chi tiết nhỏ này không ảnh hưởng đến hiệu suất tổng thể của ứng dụng.
Hình cầu 3D thuần tuý của CSS
Xem Ảnh toàn cảnh 3D CSS thuần tuý trên CodePen
Hoạt ảnh này có vẻ cực kỳ phức tạp, tuy nhiên, công cụ này sử dụng các kỹ thuật mà chúng ta đã thấy trong các ví dụ trước. Việc tạo ảnh động cho một số lượng lớn phần tử trở nên phức tạp.
Mở Công cụ của Chrome cho nhà phát triển rồi chọn một trong các phần tử có lớp plane.
Hình cầu được tạo thành từ một tập hợp các mặt phẳng và nan hoa xoay.
Các mặt phẳng và nan hoa này nằm bên trong một trình bao bọc <div>,
và phần tử này đang xoay bằng transform: rotate3d.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
Bạn có thể tìm thấy các dấu chấm được lồng bên trong phần tử plane và spoke,
họ sử dụng ảnh động sử dụng biến đổi để chia tỷ lệ và dịch chúng.
Thao tác này tạo ra hiệu ứng nhấp nháy.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
Công việc tạo hoạt ảnh này là để chọn đúng thời điểm, để tạo hiệu ứng quay và rung. Bản thân hoạt ảnh khá đơn giản, và dùng những phương thức mang lại hiệu quả cao.
Bạn có thể xem hiệu suất của ảnh động này bằng cách mở Công cụ của Chrome cho nhà phát triển và ghi lại Hiệu suất trong khi chạy. Sau lần tải đầu tiên, ảnh động sẽ không kích hoạt Bố cục hoặc Sơn. và hoạt động trơn tru.
Kết luận
Từ những ví dụ này, bạn có thể thấy việc tạo ảnh động cho một vài thuộc tính bằng các phương thức hiệu suất có thể tạo ra một số ảnh động rất thú vị như thế nào. Theo mặc định, các phương thức có hiệu suất cao được mô tả trong Hướng dẫn về ảnh động bạn có thể dành thời gian tạo hiệu ứng mong muốn mà không phải lo lắng về việc làm cho trang tải chậm.